@charset "utf-8";
a:hover{ text-decoration: none;}
a{outline: none;}
.font-mini{font-size: 80% !important; line-height: 1.2em !important; display: block; padding: 8px 12px; background: #eee;border-radius: 6px; margin-top: 5px;}
.font-mini b{ display: block; font-size: 12px !important; line-height: 1.2em !important;}

body *{ font-family: "Zen Kaku Gothic New", sans-serif;}
.pageTop{ z-index: 1000 !important;}
#end{ background: rgba(255,255,255,.7);}
main{ background: #fff; display: flex; flex-direction: column;}
#info{ background: #fff; padding: 60px 0; margin-bottom: 100vh;}

::selection { background: #fad3d0; color: #111;}
::-moz-selection { background: #fad3d0; color: #111;}

.pageTop a:hover{ background: #fff;}
.pageTop a span, 
.pageTop a span::before{ color: #333; text-decoration: none !important;}
.pageTop a{ text-align:none; box-shadow: 0 0 0 1px #333 inset;}
.pageTop a:hover { box-shadow: 0 0 0 6px #333inset;}

.inner{ width: 94%; margin: 0 auto; max-width: 980px;}
.inner2{ width: 94%; margin: 0 auto; max-width: 1100px;}

#fixedArea, main{ opacity: 0;}
.opBody2 #fixedArea, .opBody2 main{ opacity: 1;}

/*-------------------------
 mv
---------------------------*/
#mv{ width: 100%; height: 100vh; display: flex; position: relative; justify-content: center; align-items: center; z-index: 10; pointer-events: none;}
#mv .mvTit{ width: 400px; height: auto; position: absolute; left: 50%; top: 50%; margin-top: -150px; margin-left: -200px; z-index: 10000; transition: 1.0s;  box-shadow: 0 0 0 0 rgba(255,255,255,1);}
.opBody2 #mv .mvTit{ top: 4%; margin-top: 0; box-shadow: 0 0 0 6px rgba(255,255,255,1);}

#mv .mv-l, 
#mv .mv-r{ width: 50%; height: 100%; position: absolute; top: 0; z-index: 100; transition: 3.0s;}
#mv .mv-l{ left: 0; background: url("../img/sakurasaku/mv_l.webp") 0 100% no-repeat; background-size: 100% 140%;}
#mv .mv-r{ right: 0; background: url("../img/sakurasaku/mv_r.webp") 0 0% no-repeat; background-size: 100% 140%;}
.opBody2 #mv .mv-l{ width: 0; left: -50%;}
.opBody2 #mv .mv-r{ width: 0; right: -50%;}

/*-------------------------
 fixedArea
---------------------------*/
#fixedArea{ width: 100%; height: 100vh; display: block; position:fixed; left: 0; top: 0; z-index: 1; background: url("../img/sakurasaku/back.jpg") 50% 50% no-repeat; background-size: cover; overflow: hidden;}
#fixedArea .f{ width: 100%; height: 100vh; display: block; position:fixed; left: 0; top: 0; z-index: 20; pointer-events: none;}
#fixedArea .f .f1{ position: absolute; left: 50%; top: 45%;}
#fixedArea .f .f1 img{ width: 10vh; height: auto; }
#fixedArea .f .f2{ position: absolute; left: 10%; top: 11%;}
#fixedArea .f .f2 img{ width: 8vh; height: auto;}
#fixedArea .f .f3{ position: absolute; left: 13%; top: 0%;}
#fixedArea .f .f3 img{ width: 8vh; height: auto;}
#fixedArea .f .f4{ position: absolute; left: 80%; top: -1%;}
#fixedArea .f .f4 img{ width: 10vh; height: auto;}
#fixedArea .f .f5{ position: absolute; right: 0; top: 16%;}
#fixedArea .f .f5 img{ width: 10vh; height: auto;}


/*kireina-sakura*/
#fixedArea .kireina-sakura{ width: 100%; height: 100%; position: relative; z-index: 10; display:flex; cursor: url("../img/sakurasaku/cursor.png"),pointer;}
#fixedArea .kireina-sakura span{ width:14vw; height: 14vw; margin: -7vw 0 0 -7vw; position: absolute; z-index: 11; background:url("../img/sakurasaku/sakura.png") 50% 50% no-repeat; background-size: 100% 100%; pointer-events: none; transition: 0.5s; transition-timing-function: ease-in-out; transform: scale(1.0, 1.0) rotate(0deg); opacity: 1;}
#fixedArea .kireina-sakura span.sakurasaku{transform: scale(0.0, 0.0) rotate(120deg); opacity: 0;}
/*nitijo*/
#fixedArea .nitijo { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 8; pointer-events: none; }
#fixedArea .nitijo span{ position: absolute; display: flex; justify-content: center; align-items: center;}
#fixedArea .nitijo span * img{ max-width: 1100px;}

#fixedArea .nitijo span.sono1{ height: 100%; width: 100%; display: flex; position: absolute; left: 0; top: 0; justify-content: center; align-items: center; pointer-events: none; z-index: 99;}
#fixedArea .nitijo span.sono1 img{ max-width:auto; height: 100%; max-height: 1000px;}
#fixedArea .nitijo span.sono1 img.pc{ display: block;}
#fixedArea .nitijo span.sono1 img.sp{ display: none;}

#fixedArea .nitijo span.sono2{ width: 60%; height: auto; position: absolute; left: -5%; bottom: 0%; z-index: 25;}
#fixedArea .nitijo span.sono3{ width: 70%; height: auto; position: absolute; right: -5%; bottom: -8%; z-index: 20;}
#fixedArea .nitijo span.sono4{ width: 60%; height: auto; position: absolute; left: -8%; bottom: -4%; z-index: 5;}
#fixedArea .nitijo span.sono5{ width: 60%; height: auto; position: absolute; right: -8%; bottom: -10%; z-index: 3;}

@media screen and (min-width: 1400px) {

#fixedArea .nitijo span.sono2{ bottom: auto; top: 45vh;}
#fixedArea .nitijo span.sono3{ bottom: auto; top: 45vh;}
#fixedArea .nitijo span.sono6{ bottom: auto; top: 50vh;}
#fixedArea .nitijo span.sono7{ bottom: auto; top: 50vh;}

}

@media screen and (max-width: 1400px) {
#fixedArea{ background: url("../img/sakurasaku/back.jpg") 50% 50% no-repeat; background-size: 100% 100%!important;}
}

@media screen and (max-width: 800px) {
#mv .mvTit{ width: 80%; left: 10%; margin-left: 0; top: 50%; margin-top: -30vh;}
.opBody2 #mv .mvTit{ top: 50%; margin-top: -25vh;}
#fixedArea .nitijo span.sono1 img.pc{ display: none;}
#fixedArea .nitijo span.sono1 img.sp{ display: block;}

/**/
#fixedArea{ background: url("../img/sakurasaku/back2.jpg") 50% 0% no-repeat #70dbff; background-size: 100% 400px!important;}
#fixedArea .kireina-sakura span{ width:30vw; height: 30vw; margin: -15vw 0 0 -15vw;}

#fixedArea .f .f1 img, 
#fixedArea .f .f2 img, 
#fixedArea .f .f3 img, 
#fixedArea .f .f4 img, 
#fixedArea .f .f5 img{ width: 14vw; height: auto;}
#fixedArea .f .f1{ position: absolute; left: 50%; top: 110px;}
#fixedArea .f .f2{ position: absolute; left: 25%; top: 70px;}
#fixedArea .f .f3{ position: absolute; left: 0%; top: 10px;}
#fixedArea .f .f4{ position: absolute; left: auto; right: 0; top: 0px;}
#fixedArea .f .f5{ position: absolute; right: 5%; top: 150px;}

}
@media screen and (max-width: 600px) {
#fixedArea .nitijo span.sono2{ width: 100%; left: -10%;}
#fixedArea .nitijo span.sono3{ width: 100%; right: -15%;}
#fixedArea .nitijo span.sono4{ width: 130%; bottom: 0; left: -60%;}
#fixedArea .nitijo span.sono5{ width: 130%; bottom: 0; right: -50%;}
}



/*-------------------------
 main1
---------------------------*/
#main1{ padding: 40px 0; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#main1 .inner{ display: flex; flex-direction: column; align-items: center; justify-content: center;}
#main1 .inner .sakura{ width:90px; height: 90px; display: block; transition: 0.5s; transition-timing-function: ease-in-out; transform: scale(0.0, 0.0) rotate(120deg); opacity: 0;}
#main1 .inner .sakura.setView{ transform: scale(1.0, 1.0) rotate(0deg); opacity: 1;}
#main1 .inner h2{ display: block; text-align: center; padding: 10px 0; font-size: 26px;}
#main1 .inner h3{ display: flex; justify-content: center; margin-bottom: 30px;}
#main1 .inner h3 span{ font-size: 16px; font-weight: bold; padding: 8px 30px; border-radius: 30px; position: relative; color:#ffaaaa; overflow: hidden; transition: 0.8s;}
#main1 .inner h3 span br{ display: none;}
#main1 .inner h3.setView span{ color: #fff;}
#main1 .inner h3 span::before{ width: 0%; height: 100%; position: absolute; left: 0; top: 0; content: ""; z-index: -1; background:url("../img/sakurasaku/txtback.jpg") 0 0 no-repeat; background-size: 500px auto; transition: 0.8s;}
#main1 .inner h3.setView span::before{ width: 100%;}

#main1 .inner .txt{ width: 100%; max-width: 500px; display: block; padding: 30px; border: solid 6px #fad3d0;  border-radius: 20px; margin-bottom: 40px;}
#main1 .inner .txt .p{ width: 100%; margin-bottom: 40px;}
#main1 .inner .txt .p p{ width: 100%; display: block; position: relative;}
#main1 .inner .txt .p p span {width: 100%; font-size: 18px; display: block; margin-bottom: 30px; transition: 1.8s; filter: blur(4px); color: #F5C0C1; position: relative; opacity: 0.4;}
#main1 .inner .txt .p p.setView span{ opacity: 1; filter: blur(0); color: #111;}

#main1 .inner .txt .p p::before{ content: ""; width: 60px; height: 40px; position: absolute; left: -5%; top: -5%; background: url("../img/sakurasaku/hana1.png") 0 0 no-repeat; background-size: cover; transition:1.4s; transform: rotate(15deg);}

#main1 .inner .txt .p p:nth-child(odd)::before{ background: url("../img/sakurasaku/hana2.png") 0 0 no-repeat; background-size: cover;  }
#main1 .inner .txt .p p:nth-child(3n)::before{ background: url("../img/sakurasaku/hana3.png") 0 0 no-repeat; background-size: cover;  }

#main1 .inner .txt .p p.setView::before{ transform: rotate(-50deg); left: 70%; top: 100%; opacity: 0;}

#main1 .inner .txt .p p a:hover{ text-decoration: underline;}


#main1 .inner .txt p b{ display: block; margin-bottom: 30px; background:#f4a19a; color: #fff; padding: 6px; border-radius: 6px; font-size: 16px;}

#main1 .inner .txt .ojt{ width: 100%; display: block; background: #eee; border-radius: 10px; padding: 15px; transition: 0.4s; border: solid 2px #eee;}
#main1 .inner .txt .ojt.open{ background:#f4a19a; }
#main1 .inner .txt .ojt:hover, 
#main1 .inner .txt .ojt.open{ border: solid 2px #f4a19a;}

#main1 .inner .txt .ojt *{ color: #111;}
#main1 .inner .txt .ojt.open *{ color: #fff !important;}
#main1 .inner .txt .ojt dl, 
#main1 .inner .txt .ojt dl dt, 
#main1 .inner .txt .ojt dl dd{ width: 100%; display: flex; flex-direction: column; transition: 0.2s; position: relative;}
#main1 .inner .txt .ojt dl dt::after{ content: "▼"; position: absolute; right: 10px; top: 50%; margin-top: -12px; font-size: 16px; color: #f4a19a;}
#main1 .inner .txt .ojt.open dl dt::after{ content: "▲"; color: #fff;}
#main1 .inner .txt .ojt dl dt:hover{ letter-spacing: 3px;}
#main1 .inner .txt .ojt dl dt{ font-size: 18px; font-weight: bold; cursor: pointer; }
#main1 .inner .txt .ojt dl dd{ display: none; border-top: solid 2px #fff; margin-top: 5px; padding-top: 5px;}
#main1 .inner .txt .ojt dl dd span{ width: 100%; display: block; padding:2px 2px 2px 8px; font-size: 14px;}
#main1 .inner .txt .ojt dl dd span::before{ content: "・"; margin-left: -5px;}
@media screen and (max-width: 700px) {
#main1 .inner h2{ font-size: 6.8vw;}
#main1 .inner h3 { width: 90%; position: relative;}
#main1 .inner h3 span{ font-size: 5.0vw; position: static;}
#main1 .inner h3 span::before{ border-radius: 10px;}
#main1 .inner h3 span br{ display: block;}
/**/
#main1 .inner .txt{ padding: 30px 15px;}
#main1 .inner .txt .p{ margin-bottom: 10px;}
#main1 .inner .txt .p p span{ font-size: 16px; margin-bottom: 15px;}
}
@media screen and (max-width: 600px) {
#main1 .inner .txt p b br{ display: none;}
}
/*-------------------------
 main2
---------------------------*/
#main2{ background: #cfde7f; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 120px;}
#main2 .bk-m2{ width: 100%; height: 300px; display: block; background: url("../img/sakurasaku/back_sakura.jpg") repeat-x 50% 100%; background-size: auto 100%; position: relative;}
/**/
#main2 #fBtnView{ width: 60px; height: 60px; position: absolute; right: 50%; margin-right: -300px; bottom: 19%; z-index: 100;}
#main2 #fBtnImg{ width: 0px; height: 61px; position: absolute; left: 50%; margin-left: -133px; bottom: 14%; z-index: 100; background: url("../img/sakurasaku/f_sakura.png") 100% 0% no-repeat; background-size: cover; transition: 0.5s;}
#main2 #fBtnImg.open{ width: 70px; margin-left: -140px;}
#main2 .inner.main2-info{ display: flex; flex-direction: column; align-items: center; justify-content: center;}
#main2 h2{ display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 30px;}
#main2 h2 .img{ width: 180px; height: auto; margin: 30px 0 70px; position: relative; z-index: 10;}
#main2 h2 .img img{}
#main2 h2 .img .fukunyan{ position: absolute; z-index: -5; width: 110px; height: auto; margin-left: -110px; pointer-events: none; transition: 0.4s 10.0s; bottom: 75px; left: 150%; opacity: 0;}
#main2 h2 .img.setView .fukunyan{ bottom: 75px; left: 50%; opacity: 1;}
#main2 h2 .img.stop .fukunyan{ left: -150%; transition: 0.1s;}



#main2 h2 .h2txt{ display: inline-block; padding: 10px 30px; font-size: 24px; font-weight: bold; border-radius: 40px; background: #4a7d3a; color: #fff; border: solid 6px #f4a19a;}
#main2 .txt{ max-width: 90%; display:block; margin-bottom: 40px;}
#main2 .txt p{ font-size: 18px; margin-bottom: 30px; color: #4a7d3a; font-weight: bold;}
@media screen and (max-width: 700px) {
#main2 h2 .h2txt{ font-size: 4.4vw;}
#main2 .txt p{ font-size: 16px;}
#main2 #fBtnView{ margin-right: -140px;}
}
/**/
#main2 .bentoList{ width: 94%; max-width: 800px; display: flex; flex-wrap: wrap; justify-content: space-between; margin:0 3% 40px; border-radius: 10px; padding: 45px; background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.1);}
#main2 .bentoList h3{ width: 100%; display: flex; align-items: center; margin-bottom: 20px;}
#main2 .bentoList h3.mt{ margin-top: 60px;}
#main2 .bentoList h3 img{height: 30px; width: auto; margin-right: 20px;}
#main2 .bentoList h3 b{ font-size: 18px;}
#main2 .bentoList h3 b br{ display: none;}
#main2 .bentoList .item{ width: 46%; display: block; position: relative; border-radius: 4px; overflow: hidden; cursor: pointer;}
#main2 .bentoList .item::before{ width: 100%; height: 100%; content: ""; background: rgba(0,0,0,.4); position: absolute; left: 0; bottom: 0; z-index: 2; mix-blend-mode: multiply; transition: 0.4s;}
#main2 .bentoList .item:hover::before{ background: rgba(0,0,0,.0);}

#main2 .bentoList .item .imageArea{ width: 100%; height:auto;display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}

#main2 .bentoList .item .textArea{ width: 90%; position: absolute; left: 5%; bottom: 25px; z-index: 10; display: flex; flex-direction: column-reverse;}
#main2 .bentoList .item .textArea h4{  font-weight: bold; font-size: 22px; color: #fff; text-shadow: 1px 2px 4px rgba(0,0,0,.6);}
#main2 .bentoList .item .textArea .face{ width: 100%; display: flex; flex-direction: row; align-items: center; margin-bottom: 10px;}
#main2 .bentoList .item .textArea .face img{ width: 28px; height: 28px; margin-right: 8px;}
#main2 .bentoList .item .textArea .face span{ font-size: 14px; color: #fff; font-weight: 900; text-shadow: 1px 2px 4px rgba(0,0,0,.6);}
#main2 .bentoList .item .category{ padding: 4px 12px; border-radius: 6px; font-weight: bold; color: #fff; background: #aaa; font-size: 16px; position: absolute; left: 5%; top: 2%; z-index: 10;}
#main2 .bentoList .item .category.color1{ background: #FF9A9B;}
#main2 .bentoList .item .category.color2{ background:#81A432;}
#main2 .bentoList .item .category.color3{ background:#D5A823;}
#main2 .bentoList .item .category.color4{ background:#CD4346;}
/**/
#main2 .bentoList#sanchi{ flex-wrap: wrap; justify-content:space-between; margin: 0 3% 30px; padding: 20px 40px;}
#main2 .bentoList#sanchi .saku{ width: 100%; font-size: 18px; margin-bottom: 10px; font-weight: bold; display: flex; align-items: center;}
#main2 .bentoList#sanchi .saku img{ width: auto; height: 20px; margin-right: 6px;}
#main2 .bentoList#sanchi .creator{ width: 14%; min-width: 100px; margin: 0px 1% 20px; display: flex; flex-direction: column; cursor: pointer;}
#main2 .bentoList#sanchi .creator .img{ width: 98%; margin:0px 1%;}
#main2 .bentoList#sanchi .creator p{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#main2 .bentoList#sanchi .creator p .name{ font-size: 16px; color: #633A3B; margin-bottom: 5px; font-weight: bold;}
#main2 .bentoList#sanchi .creator p .btn{padding: 4px 10px; border-radius: 6px; background: #eee; color: #999; font-size: 10px; transition: 0.4s;}
#main2 .bentoList#sanchi .creator:hover p .btn{ background:#DB5759; color: #fff; }
/**/
#main2 .linkList{}
#main2 .linkList dl{ display: flex; flex-direction: row; align-items: center; padding:5px 20px;}
#main2 .linkList dl * { font-size: 14px; line-height: 1.1em;}
#main2 .linkList dl dt{ width: 170px; margin-right: 10px; font-weight: bold; color: #000; position: relative;}
#main2 .linkList dl dt::after{content: "："; position: absolute; right: 0; top: 0;}
#main2 .linkList dl dd{ margin-right: 20px;}
#main2 .linkList dl dd br{ display: none;}
#main2 .linkList dl dd a{ color:#145EC1; text-decoration: underline; margin-right: 10px;}
#main2 .linkList dl dd a:hover{ color: #000; text-decoration: none;}
@media screen and (max-width: 900px) {
#main2 .bentoList#sanchi{ justify-content: flex-start;}
#main2 .bentoList#sanchi .creator{ margin: 0px 5% 20px 0;}
}

@media screen and (max-width: 800px) {
#main2 .bentoList, 
#main2 .bentoList#sanchi{ padding:25px 20px;}
#main2 .linkList dl * { line-height: 1.6em;}
#main2 .linkList dl dd br{ display: block;}

}
@media screen and (max-width: 700px) {
#main2 .bentoList#sanchi .creator{ width: 29%; margin: 0px 2% 50px; min-width: 0;}
#main2 .bentoList#sanchi .creator p .name{ font-size: 2.8vw;}
#main2 .bentoList#sanchi .creator p .btn, 
#main2 .bentoList#sanchi .creator:hover p .btn{ background:#f4a19a; color: #fff; }
#main2 .linkList dl {padding: 5px 0px;}
#main2 .linkList dl dt::after{ display: none;}
#main2 .linkList dl dt{ width: 90px; height: 60px; display: flex; justify-content: center; align-items: center; background:#739359; border-radius: 4px; padding: 10px; font-size: 2.2vw; text-align: center; line-height: 1.1em; color: #fff;}
#main2 .linkList dl dd a{ font-size: 3.4vw; margin: 0 5px;}

}

@media screen and (max-width: 600px) {
#main2 .bentoList h3{ justify-content:space-between;}
#main2 .bentoList h3 img{ width: 40%; height: auto; margin-right: 0;}
#main2 .bentoList h3 b{ width: auto; font-size: 4.0vw; line-height: 1.4em;}
#main2 .bentoList h3 b br{ display: block;}
/**/
#main2 .bentoList .item{ width: 100%; margin-bottom: 30px; border-radius: 10px;}
#main2 .bentoList .item::before, 
#main2 .bentoList .item:hover::before{ height: 50%; background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 50%,rgba(0,0,0,0.8) 100%);
}
}






/*-------------------------
 modal
---------------------------*/

#modal-area { opacity: 0; pointer-events: none; z-index: 10000; position:fixed; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.fixed #modal-area { opacity: 1; pointer-events: all; z-index: 10000;}
#modal-area .back-div{ position:fixed; left: 0; top: 0; width: 100%; height: 100%; background:rgba(0,0,0,.6); z-index: 1;}

/*-----*/
#modal-area .modal-item{ display: none;}
.fixed #modal-area .modal-item.open{ display: flex;}
/**/
#modal-area .modal-item{ width: 90%; max-width: 700px; height: 90vh; background: #fff; padding: 30px; border-radius: 4px; justify-content: space-between; flex-wrap: wrap; border: solid 1px #ccc; box-shadow: 0 8px 14px rgba(0,0,0,.2); overflow-x: auto; z-index: 1000; position: relative;}
#modal-area .modal-item::-webkit-scrollbar {width: 8px;}
#modal-area .modal-item::-webkit-scrollbar-track { background-color:#ccc; border-radius:0px;}
#modal-area .modal-item::-webkit-scrollbar-thumb { background-color:#F7B1B3; border-radius:0px; border-radius: 10px;}
/**/
@media screen and (min-width: 701px) {
#modal-area .modal-item .pcTit{ font-size: 22px; font-weight: bold; width: 100%; display: block; margin-bottom: 20px; color: #EF585A; padding-right: 30px; line-height: 1.1em;}
#modal-area .modal-item .image{ width: 45%; display: block; border-radius:8px; overflow: hidden; }
#modal-area .modal-item .image img{ width: 100%; height: auto;}
#modal-area .modal-item h2{ display: none;}
/**/
#modal-area .modal-item .left{ width: 50%; display: flex; flex-direction: column;}
#modal-area .modal-item .left .txtArea{ width: 100%; display: flex; flex-direction: column; margin-bottom: 30px;}
#modal-area .modal-item .left .txtArea .face{ display: flex; flex-direction: row; align-items: center;}
#modal-area .modal-item .left .txtArea .face img{ width: 50px; height: 50px; margin-right: 10px;}
#modal-area .modal-item .left .txtArea .face span{ font-size: 22px; font-weight: bold;}
#modal-area .modal-item .left .txtArea .comment{ font-size: 16px; margin-top: 30px;}
#modal-area .modal-item .left .txtArea .comment b{ display: inline-block; font-size: 14px; padding: 6px 20px; line-height: 1em; background:#E98586; color: #fff; margin-bottom: 5px; border-radius: 4px;}
/**/
#modal-area .modal-item .left dl{ width: 100%; display: block;}
#modal-area .modal-item .left dl > *{ width: 100%; display: flex; padding: 2px 0;}
#modal-area .modal-item .left dl dt { margin-bottom: 10px;}
#modal-area .modal-item .left dl dt b{ display: inline-block; font-size: 14px; padding: 6px 20px; line-height: 1em; background:#E98586; color: #fff; margin-bottom: 5px; border-radius: 4px;}
#modal-area .modal-item .left dl dt *{ font-size: 20px;}
#modal-area .modal-item .left dl dd { display: flex; justify-content: space-between; border-bottom: dotted 1px #ccc;}
#modal-area .modal-item .left dl dd.mt{ margin-top: 40px;}
#modal-area .modal-item .left dl dd span{ font-size: 17px;}
#modal-area .modal-item .left dl dd span:nth-child(2){ white-space: nowrap; margin-left: 5px;}
}
/*btn*/
#modal-area .modal-item .close-btn{ width:50px; height: 50px; box-shadow: 0 0 0 50px #EF585A inset; display: flex; justify-content: center; align-items: center; border-radius: 100%; color: #fff; font-size: 30px; font-weight: bold; position: fixed; right: 50%; top: 6vh; margin-right: -340px; line-height: 1em; padding-bottom: 5px; transition: 0.5s; cursor: pointer;}
#modal-area .modal-item.com .close-btn{ margin-right: -390px;}
#modal-area .modal-item .close-btn:hover{ box-shadow: 0 0 0 4px #EF585A inset; color: #EF585A;}
/*comment*/
#modal-area .modal-item.com{ width: 94%; max-width: 800px; padding: 0; border-radius: 0;}
/**/
.thumbnail{ display: none;}
.n1-set .thumbnail, 
.n2-set .thumbnail, 
.o1-set .thumbnail, 
.o2-set .thumbnail { display: block;}
.thumbnail{ width: 60px; height: auto; position: absolute; right: 50%; margin:-180px -430px 0 0; top: 50%; z-index: 100;}
.thumbnail li{ width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 100%; margin: 15px 0; object-fit: cover; background: #000; box-shadow: 0 0 0 0px #EF585A; transition: 0.8s; cursor: pointer;}
.thumbnail li img{ width: 100%; height: auto; opacity: 0.3; transition: 0.4s;}
.thumbnail li:hover img { opacity: 0.8;}
.n1-set .thumbnail li#n1-t, 
.n2-set .thumbnail li#n2-t, 
.o1-set .thumbnail li#o1-t, 
.o2-set .thumbnail li#o2-t { box-shadow: 0 0 0 6px #EF585A;}
.n1-set .thumbnail li#n1-t img, 
.n2-set .thumbnail li#n2-t img, 
.o1-set .thumbnail li#o1-t img, 
.o2-set .thumbnail li#o2-t img { opacity: 1;}
@media screen and (max-width: 900px) {
#modal-area .modal-item{ margin-left: -7vw;}
#modal-area .modal-item .close-btn{ width:100px; height: 100px; border-radius: 0 0 0 20px; right: 5%; top: 5vh; margin: 0;}
.thumbnail{ right: 0%; margin:-180px 0 0 0;}
.thumbnail li{ width: 40px; height: 40px;}
/**/
#modal-area .modal-item.com{ margin-left: 0;}
#modal-area .modal-item.com .close-btn{ margin-right: -10px;}

}
@media screen and (max-width: 700px) {
#modal-area .modal-item{ margin-left: 0;}
.thumbnail, 
.n1-set .thumbnail, 
.n2-set .thumbnail, 
.o1-set .thumbnail, 
.o2-set .thumbnail { display: none;}
/**/
#modal-area .modal-item{ border: none; padding: 0;}
#modal-area .modal-item .pcTit{ display: none;}
#modal-area .modal-item .image{ width: 100%; height: 300px; overflow: hidden; display: flex; justify-content: center; align-items: center;}
#modal-area .modal-item .image img{ width: 100%; height: auto;}
#modal-area .modal-item h2{ font-size: 4.4vw; font-weight: bold; width: 100%; display: block; color: #EF585A; line-height: 1.2em; padding: 15px 3%;}
/**/
#modal-area .modal-item .left{ width: 100%; display: block;}
#modal-area .modal-item .left .txtArea{ width: 100%; display: flex; flex-direction: column; padding: 0 3%; margin-bottom: 15px;}
#modal-area .modal-item .left .txtArea .face{ display: flex; flex-direction: row; align-items: center;}
#modal-area .modal-item .left .txtArea .face img{ width: 40px; height: 40px; margin-right: 10px;}
#modal-area .modal-item .left .txtArea .face span{ font-size: 20px; font-weight: bold;}
#modal-area .modal-item .left .txtArea .comment{ font-size: 18px; margin-top: 10px; padding-bottom: 15px;border-bottom: solid 1px #ddd;}
#modal-area .modal-item .left .txtArea .comment b, 
#modal-area .modal-item .left .txtArea .comment b+br { display: none;}
/**/
#modal-area .modal-item .left dl{ width: 94%; margin: 0 3% 50px; display: block; }
#modal-area .modal-item .left dl > *{ width: 100%; display: flex; padding: 2px 0;}
#modal-area .modal-item .left dl dt b{font-size: 18px; color: #EF585A;}
#modal-area .modal-item .left dl dt *{ font-size: 14px;}
#modal-area .modal-item .left dl dd { display: flex; justify-content: space-between; border-bottom: dotted 1px #ccc;}
#modal-area .modal-item .left dl dd.mt{ margin-top: 40px;}
#modal-area .modal-item .left dl dd span{ font-size: 17px;}
}