@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;400;500;700&display=swap');

body, main ol, main ul, main dl, main li, main dt, main dd, main table, 
main th, main td, main input, main textarea, main select, main h2 span , main h2 ,main h3, main h3 span ,main h4, 
main h5, main h6, main figure, main p ,
.mfp-title, #tab ul li a, #sub .txtArea h2 , #sub .txtArea p , .scrollNav h2 , .scrollNav li{
font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "Times New Roman", serif;
}
main > section h2:first-child {
margin-top: 5rem;
}
h2.txtTtl {
color: #D8B2F8;
}

@media screen and (min-width: 641px){
.brStyle {
display: none;
}
}

/* =======================================
プラン一覧 #planList
======================================= */
#planList {
position: relative;
max-width:1280px;
width: 90%;
margin: 0 auto;
}
#planList > section {
display: flex;
flex-wrap:wrap;
background: url("../img/furisode/paper.jpg");
margin-top: 5rem;
position: relative;
padding: 5rem 3rem;
justify-content: space-between;
min-height: 680px;
}
#planList > section.navy:before {
content: "";
background: url("../img/furisode/kazari03.png") no-repeat right top;
background-size: contain;
width: 30%;
height: 300px;
display: block;
position: absolute;
top: -50px;
right: 0;
}
#planList > section.pink:before {
content: "";
background: url("../img/furisode/kazari04.png") no-repeat left top;
background-size: contain;
width: 30%;
height: 250px;
display: block;
position: absolute;
top: 10px;
left: -50px;
}
#planList > section:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 8px;
left: 8px;
border: 3px solid #555;
}
#planList > section .txtArea {
width: 40%;
text-align: center;
position: relative;
z-index:5;
}
#planList > section .txtArea p {
display: inline-block;
text-align: left;
}
#planList > section:first-of-type div:last-of-type{
order:-1;
}
#planList > section .txtArea h3 {
font-size: 3rem;
text-align: center;
letter-spacing: .5rem;
text-shadow: 1px 2px 0 #6ABAFF; 
color: #000;
margin-bottom: 2rem;
}
#planList > section.pink .txtArea h3 {
text-shadow: 1px 2px 0 #F279B5;
}
#planList > section .txtArea h3 span {
background: url("../img/furisode/frame.png") no-repeat center top;
display: block;
line-height: 100%;
padding: 1.5rem 1rem 2.5rem;
background-size: contain;
font-size: .9rem;
color: #135984;
}
#planList > section .txtArea ul {
margin-top: 5rem;
}
#planList > section .txtArea ul li a {
width: 100%;
padding: 1rem;
display: block;
background: #fff;
margin: .5rem auto;
border-radius: 35px;
color: #135984;
}
#planList > section.pink .txtArea ul li a {
color: #F279B5;
}

#planList > section.navy .txtArea ul li:nth-of-type(1) a {
background: #135984;
color: #fff;
}

#planList > section.pink .txtArea ul li:nth-of-type(1) a {
background: #F279B5;
color: #FFF;
}

#planList > section > div:last-of-type {
position: relative;
width: 55%;
}

#planList > section > div:last-of-type p {
position: absolute;
width: 50%;
z-index: 5;
padding: .3rem;
}

#planList > section.navy > div:last-child p:first-of-type,
#planList > section.pink > div:last-child p:nth-of-type(2) {
margin-top: -7rem;
}

#planList > section.pink .txtArea {
margin-top: 5rem;
}
@media screen and (max-width: 1280px) {
#planList > section.navy > div:last-child p:first-of-type,
#planList > section.pink > div:last-child p:nth-of-type(2) {
margin-top: -3rem;
}
#planList > section.pink > div:last-of-type {
width:63%;
margin-right: -8%;
}
#planList > section.navy > div:last-of-type {
width:63%;
margin-left: -6%;
}
#planList:before {
width: 250px;
top: -100px;
}
#planList:after {
width: 220px;
top: -90px;
}
}
@media screen and (max-width: 812px){
#planList > section .txtArea {
width:100%;
}
#planList > section {
max-height: none;
}
#planList > section .txtArea ul li a {
max-width: 400px;
}
#planList > section:first-of-type div:last-of-type {
order: 0;
}
#planList > section div:last-of-type {
margin-top: 5rem;
}
#planList > section.navy > div:last-of-type,
#planList > section.pink > div:last-of-type {
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
@media screen and (max-width: 480px){ 

#planList:after,
#planList:before {
display: none;
}
#planList > section {
margin-top: 3rem;
padding: 2rem;
}
#planList > section.pink .txtArea {
margin-top: 0;
}

#planList > section:after {
top: 4px;
left: 4px;
}
#planList > section > div:last-of-type p {
padding: .1rem;
}
#planList > section .txtArea ul {
margin-top: 2rem;
}
}


/* =======================================
furisodeMenu 振袖卒業袴メニュー
======================================= */
#furisodeMenu {
background: url("../img/furisode/bg01.svg");
padding: 5rem 0;
margin: 6rem auto 0;
}
#furisodeMenu section {
width: 90%;
max-width:1280px;
margin: 0 auto;
text-align: center;
position: relative;
}
#furisodeMenu section:before {
background: url("../img/furisode/pic01.png") no-repeat bottom left;
width: 60%;
height: 120%;
bottom: -5rem;
position: absolute;
left: 0;
background-size:contain;
display: block;
content: "";
}
#furisodeMenu section:after {
background: url("../img/furisode/pic02.png") no-repeat bottom right;
width: 30%;
height: 120%;
bottom: -5rem;
position: absolute;
right: 0;
background-size:contain;
display: block;
content: "";
}
#furisodeMenu section * {
color: #fff !important;
}
#furisodeMenu h3,
#furisodeMenu h3 + p,
#furisodeMenu dt,
#planDetail .flexBox > section h4 {
position: relative;
z-index: 5;
}
#furisodeMenu h3 {
font-size: 2.5rem;
line-height: 150%;
font-weight: bold;
text-shadow: 0 0 5px rgba(190,45,45,.5);
}
#furisodeMenu h3 + p{
margin-top: 1rem;
font-size: 1.3rem;
margin-bottom: 3rem;
}
#furisodeMenu dl {
display: flex;
flex-wrap:wrap;
max-width: 710px;
justify-content: space-between;
margin: 1rem auto 0;
background: #8D9BD0;
padding: 1.5rem 2rem;
align-items: center;
border-radius: 60px;
position: relative;
z-index: 5;
}
#furisodeMenu dl:last-of-type{
background: #E87A9C;
}
#furisodeMenu dt {
width: 30%;
font-weight: 600;
font-size: 1.6rem;
letter-spacing: .2rem;
}
#furisodeMenu dd {
width: calc(70% / 2 - 2%);
margin: 0 1%;
}
#furisodeMenu dd a {
display: block;
background: #7AC4D1;
text-align: left;
padding: 1rem;
position: relative;
}
#furisodeMenu dd i {
position: absolute;
right: 20px;
top: 38%;
}
#furisodeMenu dl:last-of-type dd a {
background: #F2B5DF;
}

@media screen and (max-width: 1280px){ 
#furisodeMenu section:before {
left: -100px;
}
#furisodeMenu section:after {
display: none;
}
}

@media screen and (max-width: 812px){ 
#furisodeMenu section:before {
left: -100px;
width: 90%;
}
}

@media screen and (max-width: 480px){ 
#furisodeMenu h3 {
font-size: 1.5rem;
}
#furisodeMenu section:before {
display: none;
}
}

/* =======================================
#bnrList 
======================================= */
#bnrList {
display: flex;
flex-wrap:wrap;
max-width: 1280px;
margin: 5rem auto;
justify-content: center;
}
#bnrList li {
width: 31%;
margin: 0 1%;
}

@media screen and (max-width: 480px){
#bnrList li {
width: 48%;
margin-bottom: 1rem;
}
#bnrList li:last-child {
margin-bottom: 0;
}
#furisodeMenu dl {
border-radius: 15px;
}
#furisodeMenu dl > * {
width: 100%;
}
#furisodeMenu dd a {
margin-top: 1px;
}
}


/* =======================================
mainvisual タイトルetc
======================================= */
nav + section {
position: relative;
height: 938px;
}
nav + section > div {
position: absolute;
max-width: 600px;
width: 90%;
left: 10%;
top: 28%;
z-index: 3;
background: #fff;
box-shadow: 0 0 10px #ddd;
border-radius: 15px;
}
nav + section > div div {
position: relative;
padding: 5rem;
}
nav + section > div.txtArea div:after {
content: "";
background: url("../img/common/frame-flower02.png") repeat-x;
width: 100%;
height: 50px;
display: block;
position: absolute;
bottom: 0;
left: 0;
}
nav + section > div.txtArea h2 {
color: #d8b2f8;
font-size: 2rem;
position: relative;
text-align: center;
}
nav + section > div.txtArea h2 span {
font-size:1rem;
display: block;
line-height: 100%;
}
nav + section > div.txtArea h2:after {
content: "";
display: block;
left: calc(50% - 25px);
position: absolute;
width: 50px;
height: 2px;
background: #D8B2F8;
bottom: -15%;
}
nav + section > div.txtArea {
text-align: center;
}
nav + section > div.txtArea p {
margin: 3rem auto 0;
display: inline-block;
text-align: left;
}

#sub #mainVisual:not(.width100) {
width: 70%;
margin:  0 0 0 auto !important;
position: relative;
}
#sub #mainVisual:not(.width100):after {
content: "";
background: linear-gradient(to right, #FFF, transparent);
width: 30%;
height: 100%;
display: block;
position: absolute;
left: 0;
top: 0;
}

@media screen and (max-width: 1400px) {
nav + section > div div {
padding: 3rem 3rem 4rem;
}
nav + section > div  {
left: 2%;
margin-bottom: 5rem;
}
}

@media screen and (max-width: 1280px) {
nav + section > div {
max-width:500px;
left: 5%;
top: 10%;
}
#sub #mainVisual {
width: 100%;
}
#sub #mainVisual:after {
display: none;
}
nav + section > div {
max-width: none;
position: relative;
margin-top: -2rem;
}
nav + section {
height: auto;
}
nav + section > div {
width: 80%;
left: 10%;
}
nav + section > div.txtArea h2 {
color: #D8B2F8;
font-size: 1.5rem;
position: relative;
text-align: center;
}
#sub #mainVisual:not(.width100) {
width: 100%;
margin:  0 0 0 auto !important;
position: relative;
}
#sub #mainVisual:not(.width100):after {
display: none;
}
}

@media screen and (max-width: 812px){ 
nav + section > div.txtArea{
margin-bottom: 50px;
}
}

@media screen and (max-width: 480px){ 
nav + section {
margin-bottom: 1rem;
}
nav + section > div {
width: 96%;
left: 2%;
}
nav + section > div div {
padding: 2rem 2rem 2.5rem;
}
main h2 {
font-size: 1.5rem;
}
}


/* =======================================
#topPic
======================================= */
#topPic {
width: 100%;
min-height: 700px;
margin-top: 5rem;
}
#topPic img {
height:700px;
width: 100%;
object-fit: cover;
position: absolute;
}
#topPic figcaption {
position: relative;
top: -2rem;
-ms-writing-mode: tb-rl;
writing-mode: horizontal-tb;
/* left: calc(50% - 30%); */
display: flex;
width: 30%;
align-items: flex-start;
flex-direction: row-reverse;
}
#topPic figcaption span {
display: inline-block;
padding: 1rem 1rem 1rem 1rem;
line-height: 45px;
font-size: 2rem;
background: #135984;
color: #fff;
margin-left: 10px;
width: 65px;
}
#topPic figcaption span:last-child {
margin-left: 0;
}
#topPic figcaption.pink span {
background: #E98192;
}

@media screen and (max-width: 1280px){
#topPic img {
height:560px;
}
#topPic {
min-height: 560px;
}
#topPic figcaption {
left: 7%;
}
}

@media screen and (max-width: 812px){
#topPic img  {
height:460px;
}
#topPic {
min-height: 460px;
}
}

@media screen and (max-width: 480px){
#topPic img {
height: 320px;
}
#topPic {
min-height: 320px;
}
#topPic figcaption span {
font-size: 1.5rem;
line-height: 35px;
width: 45px;
padding: 0.7rem;
}
#topPic figcaption {
left:5%;
}
}

/* =======================================
#points
======================================= */
#points {
text-align: center;
position: relative;
max-width: 1280px;
width: 90%;
margin: 0 auto;
}
#points > h3 {
color: #135984;
font-size: 1.5rem;
width: 90%;
margin:  3rem auto 2rem;
max-width:980px;
position: relative;
text-shadow: 0 0 3px #fff, 1px 0 3px #fff, 1px 1px 3px #fff, 2px 1px 5px #fff, 2px 2px 5px #fff, 2px 2px 7px #fff;
}
#points > h3:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150%;
background-image: url("../img/furisode/flower.png"),url("../img/furisode/flower02.png");
background-repeat:no-repeat;
background-position: left top, right top;
background-size: contain;
}
#points > h3 + p {
display: inline-block;
text-align: left;
}
#points .flexBox {
max-width: 1280px;
width: 90%;
margin: 3rem auto 0;
counter-reset: subsection;
}
#points .flexBox section {
width: calc(100% /3);
display: flex;
flex-direction: column;
}
#points .flexBox section h3::before {
counter-increment: subsection;
content: " Point0"counter(subsection)" ";
}
#points .flexBox section:nth-child(n+10) h3::before {
content: " Point"counter(subsection)" ";
}
#points .flexBox section figure {
order:-1;
width: 100%;
height: 350px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
#points .flexBox section .txtArea {
padding: 4rem 2rem 3rem;
min-height: 300px;
}
#points .flexBox section {
background:rgba(255,185,206,.5);
position: relative;
}
#points .flexBox section:nth-of-type(3n+2){
background:rgba(216,178,248,.5);
}
#points .flexBox section:nth-of-type(3n+3){
background:rgba(178,194,248,.5);
}
#points .flexBox section h3 {
font-size:2.8rem;
color:#FDB3BF;
line-height: 70%;
text-shadow: 2px 2px 0 #fff;
font-family: 'Brush Script MT','Snell Roundhand','Segoe Script',sans-serif;
margin-top: -7rem;
text-align: left;
margin: -7rem auto 2rem 0rem;
}
#points .flexBox section:nth-of-type(2) h3,
#points .flexBox section:nth-of-type(5) h3{
color: #D8B2F8;
}
#points .flexBox section:nth-of-type(3) h3,
#points .flexBox section:nth-of-type(6) h3{
color: #B2C2F8;
}
#points .flexBox section h3 span {
display: inline-block;
padding: 1.2rem 1.2rem .9rem;
background: #FDB3BF;
color: #fff;
font-weight: 700;
text-shadow: none;
min-width: 100px;
font-size: 1.5rem;
}
#points .flexBox section:nth-of-type(2) h3 span,
#points .flexBox section:nth-of-type(5) h3 span{
background: #D8B2F8;
}
#points .flexBox section:nth-of-type(3) h3 span,
#points .flexBox section:nth-of-type(6) h3 span{
background: #B2C2F8;
}
#points .flexBox section .txtArea > * {
position: relative;
z-index: 5;
}
#points .flexBox section .txtArea p {
text-align: left;
}
#points .flexBox section .txtArea:after {
content: "";
background: url("../img/furisode/wa-bg01.svg") repeat;
mix-blend-mode: overlay;
display: block;
position: absolute;
z-index: 0;
top: 0;
left: 0;
height: 100%;
width: 100%;
}

@media screen and (max-width: 1024px){
#points .flexBox section figure img {
height: 230px;
}
#points .flexBox section .txtArea {
min-height: 260px;
}
#points .flexBox section {
width: calc(100% /2);
}
#points .flexBox section h3 span {
font-size: 1.3rem;
}
}

@media screen and (max-width: 812px){
#points > h3 {
width: 100%;
margin:  3rem 0 2rem;
}
#points > h3:before {
left: -6%;
width: 111%;
}
}

@media screen and (max-width: 640px){
#points > h3:before {
height: 80%;
top: 35%;
}
}

@media screen and (max-width: 480px){
#points .flexBox section {
width: 100%;
}
#points .flexBox section .txtArea {
min-height: 0px;
}
#points > h3:before {
background-size: 120px;
background-position: left bottom,right bottom;
z-index: -1;
}
#points > h3 {
font-size: 1.3rem;
}
}


/* =======================================
プラン詳細 #planDetail
======================================= */
#planDetail {
position: relative;
background: url("../img/furisode/paper-bg02.jpg");
margin: 5rem auto;
padding: 10rem 0;
}
#planDetail.pink {
background: url("../img/furisode/paper-bg03.jpg");
}
#planDetail h3 {
width: 90%;
text-align: center;
position: relative;
margin: 0 auto;
}
#planDetail:after {
content: "";
display: block;
background:url("../img/furisode/kazari03.png") no-repeat center;
background-size: contain;
width: 300px;
height: 250px;
position: absolute;
top: 100px;
right: 350px;
}
#planDetail.pink:after {
background:url("../img/furisode/kazari04.png") no-repeat center;
background-size: contain;
}
#planDetail h3 img {
max-width: 220px;
}
#planDetail h3:before,
#planDetail h3:after {
display: block;
width:150px;
height: 50px;
content: "";
background: url("../img/furisode/planlist-bg.png") no-repeat;
background-size: contain;
left: calc(50% - 300px);
position: absolute;
top: -20px;
}
#planDetail h3:after {
top: auto;
bottom: -10px;
left: auto;
right: calc(50% - 300px);
}
#planDetail > .flexBox {
width: 90%;
max-width: 1400px;
margin:10rem auto 0;
justify-content: space-between;
}
#planDetail .flexBox > * {
width: 48%;
}
#planDetail .flexBox > section {
text-align: center;
}
#planDetail .flexBox:first-of-type .picArea {
order: -1;
}
#planDetail .flexBox > section h4 {
background: url("../img/furisode/frame.png") no-repeat center;
text-align: center;
font-size: 2.5rem;
padding: .7rem 0 2.5rem;
color: #000;
text-shadow: 1px 2px 0 #F7A0CF;
max-width: 520px;
margin: auto auto 1.5rem auto;
line-height: 1.2;
min-height: 128px;
display: flex;
justify-content: center;
align-items: center;
}
#planDetail .flexBox:last-of-type > section h4{
text-shadow: 1px 2px 0 #6ABAFF;
}
#planDetail .flexBox > section p {
color: #E87DB7;
font-size: 1.5rem;
display: inline-block;
text-align: left;
}
#planDetail .flexBox:last-of-type > section p {
color: #7DBBE8;
}
#planDetail .flexBox > section p strong {
font-size: 3.4rem;
font-weight: 400;
}
#planDetail .flexBox > section p span:not(.middle) {
color: #777;
}
#planDetail .flexBox > section p span.middle {
font-size: 2rem;
}
#planDetail .flexBox > section .txtArea {
text-align: left;
background: #fff;
position: relative;
margin-top: 2rem;
display: inline-block;
width: 100%;
}
#planDetail .flexBox:first-of-type > section .txtArea:before {
content: "";
background: url("../img/furisode/kazari05.png") no-repeat bottom;
background-size: contain;
display: block;
width: 80px;
height: 280px;
bottom: 0;
right: 0;
z-index: 5;
position: absolute;
}
#planDetail .flexBox:last-of-type > section .txtArea:before {
content: "";
background: url("../img/furisode/kazari06.png") no-repeat;
background-size: contain;
display: block;
width: 140px;
height: 140px;
top: 0;
left: 0;
z-index: 5;
position: absolute;
}
#planDetail .flexBox > section .txtArea:after {
content: "";
position: absolute;
top: 4px;
left: 4px;
display: block;
width: 100%;
height: 100%;
z-index: 1;
border: 2px solid #333;
}
#planDetail .flexBox > section .txtArea ul,
#planDetail .flexBox > section .txtArea dl {
display: flex;
flex-wrap:wrap;
justify-content: center;
width: 100%;
}
#planDetail .flexBox > section .txtArea ul {
padding: 3rem 1rem 2rem;
}
#planDetail .flexBox > section .txtArea ul li {
width:130px;
display: flex;
flex-wrap:wrap;
justify-content: center;
align-content: center;
text-align: center;
border: 3px dashed #F7A0CF;
height: 130px;
border-radius: 70px;
line-height: 130%;
font-weight: 700;
margin: 1.5%;
font-size: 1.2rem;
position: relative;
}
#planDetail .flexBox > section .txtArea.square ul li {
width:180px;
height: auto;
border-radius: 15px;
padding: 1rem;
margin-top: 1.5%;
}
#planDetail .flexBox > section .txtArea.square ul li:nth-child(-n+3){
margin-top: 0;
}

.txtArea.square li > div {
font-size:.8rem;
font-weight: normal;
margin-top: .5rem;
}

#planDetail .flexBox:last-of-type > section .txtArea ul li {
border: 3px dashed #7DBBE8;
}

#planDetail .flexBox > section .txtArea ul li:after {
content: "+";
position: absolute;
top: 40%;
right: -18px;
color:  #F7A0CF;
font-weight: normal;
}

#planDetail .flexBox:last-of-type > section .txtArea ul li:after {
color: #7DBBE8;
}

#planDetail .flexBox > section .txtArea ul li:last-of-type::after {
display: none;
}

#planDetail .flexBox > section .txtArea ul li span {
font-weight: 400;
font-size: .9rem;
}

#planDetail .flexBox > section .txtArea p {
width: 90%;
margin: 0 auto 2rem;
color: #7f7f7f;
font-size: 16px;
display: block;
}

#planDetail .flexBox > section .txtArea > p.notUl {
padding: 3.5rem 2.5rem 2.5rem 5rem;
width: 100%;
margin: 0;
} 
#planDetail .flexBox > section .txtArea dl {
background: #F7A0CF;
padding: 1.5rem;
justify-content: space-between;
}
#planDetail .flexBox:last-of-type > section .txtArea dl {
background: #7DBBE8;
}
#planDetail .flexBox > section .txtArea dl dt {
width: 30%;
border-right: 1px solid #fff;
color: #fff;
}
#planDetail .flexBox > section .txtArea dl dd {
width: 65%;
color:#fff;
}

#planDetail .flexBox > .picArea:not(.one) li {
width:48%;
margin:1%;
}

#planDetail .flexBox > .picArea li:first-of-type {
margin-top: -3rem;
}
_::-webkit-full-page-media, _:future, :root #planDetail .flexBox > section .txtArea ul li.sfr {
padding-top:40px;
}
_::-webkit-full-page-media, _:future, :root #planDetail .flexBox > section .txtArea ul li.sfr02 {
padding-top:50px;
}

@media screen and (max-width: 1500px){
#planDetail .flexBox > section .txtArea ul {
padding: 3rem 0 2rem;
}
#planDetail .flexBox > section .txtArea ul li {
width: 120px;
height: 120px;
}
#planDetail:after {
right: 50px;
}
}

@media screen and (max-width: 1280px){
#planDetail .flexBox > section .txtArea ul li {
width: 160px;
height: 160px;padding: .5rem;
border-radius: 80px;
margin-top: 5px;
}
.picArea {
margin-top: 5rem;
}
#planDetail .flexBox > section h4 {
font-size: 2rem;
background-size: contain;
margin-bottom: 2rem;
}
#planDetail .flexBox > section p {
font-size:1.3rem;
}
}

@media screen and (max-width: 1024px){
#planDetail .flexBox > *{
width: 100%;
}
#planDetail .flexBox .picArea {
max-width:640px;
margin: 5rem auto 0;
min-height: 500px;
}
#planDetail .flexBox .picArea img {
max-height: 550px;
width: 100%;
box-shadow: 0 0 10px #ccc;
object-fit: cover;
}
#planDetail .flexBox:first-of-type .picArea {
order: 0;
}
#planDetail > .flexBox {
margin-top:5rem;
}
}

@media screen and (max-width: 812px){
#points .flexBox section .txtArea {
padding: 4rem 1rem 3rem;
}
#planDetail .flexBox > section .txtArea ul li {
width: 160px;
height: 160px;
}
}

@media screen and (max-width: 640px){
#planDetail .flexBox > section .txtArea.square ul li:nth-child(-n+2){
margin-top: 0;
}
#planDetail .flexBox > section .txtArea.square ul li:nth-child(-n+3){
margin-top: 1.5%;
}
}

@media screen and (max-width: 480px){
#planDetail h3:before {
left: calc(50% - 150px);
top: -80px;
}
#planDetail > .flexBox {
margin-top: 5rem;
}
#planDetail .flexBox > section h4 {
padding-bottom: 7vw;
font-size: 7vw;
}
#planDetail h3:after {
right: calc(50% - 155px);
bottom: -60px;
}
#planDetail:after {
display: none;
}
#planDetail .flexBox > section .txtArea ul li {
width: 140px;
height: 140px;
}
#planDetail .flexBox > section .txtArea dl dt,
#planDetail .flexBox > section .txtArea dl dd {
width: 100%;
}
#planDetail .flexBox > section .txtArea dl dt {
border-right: none;
border-bottom: 1px solid #fff;
}
#planDetail .flexBox .picArea {
min-height: 270px;
}
#planDetail .flexBox > section .txtArea ul li:after {
display: none;
}
#planDetail .flexBox:first-of-type > section .txtArea:before {
width: 50px; 
}
#planDetail .flexBox:last-of-type > section .txtArea:before {
width: 100px;
}
#planDetail .flexBox > section .txtArea.square ul li {
width:45%;
padding: 1rem .5rem;
}
}


/* =======================================
#gallery 
======================================= */

#picGallery {
position: relative;
padding: 0 0 3rem;
}
#gallery {
width: 90% !important;
max-width:1280px !important;
margin: 5rem auto 3rem;
}
#gallery .item {
width: 19%;
margin: .5%;
display: none;
}
#gallery .item:nth-child(-n+10) {
display: block;
}
#gallery + p a {
background: #fff;
color: #9cd8d8;width: 90%;
max-width:380px;
display: block;
padding: .5rem;
text-align: center;
margin: 0 auto;
border-radius:  30px;
}
#picGallery:after {
content: "";
width: 100%;
display: block;
height: 60%;
background: #9CD8D8;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
}

@media screen and (max-width: 1366px){ 
#gallery {
width: 98% !important;
}
}

@media screen and (max-width:1080px){ 
#gallery .item {
width: 32%;
}
}

@media screen and (max-width:812px){ 
#gallery {
margin: 50px auto 3rem;
}
}

@media screen and (max-width: 480px){
#gallery {
display: flex;
flex-wrap:wrap;
justify-content: space-between;
margin: 30px auto 3rem;
}
#gallery p {
width: 49% !important;
}
}


/* =======================================
レンタル専用エリア
======================================= */
#fullSupport {
padding: 5rem 0;
position: relative;
}

#fullSupport:after {
display: block;
width: 100%;
height:50%;
content: "";
background-image: url("../img/furisode/wa-bg01.svg");
background-color:#6DBCD9;
position: absolute;
bottom:0;
left: 0;
z-index: -1;
padding: 1.5rem 0 4rem;
opacity:.3;
}
#fullSupport.pink:after {
background-color:#F6A4D0;
}
#fullSupport > section {
min-height: 350px;
}
#fullSupport > section,
.tenjikai {
max-width: 1280px;
margin: 0 auto;
width: 90%;
text-align: center;
position: relative;
}

#fullSupport > section h3 {
color:#74B3E8;
text-shadow:0 0 5px #fff;
font-size: 2rem;
line-height: 150%;
font-weight: 600;
margin-top: 4rem;
}
#fullSupport.pink > section h3 {
color: #FF9AC3;
}

#fullSupport > section h3 + p {
display: inline-block;
text-align: left;
margin-top: 3rem;
}

#fullSupport > section figure {
width: 80%;
max-width:515px;
margin: 2rem auto 0;
}

#fullSupport > section li {
position:absolute;
bottom: -120px;
}

#fullSupport.pink > section li {
height: 500px;
overflow: hidden;
}

#fullSupport.pink > section li,
#fullSupport.pink > section li:last-of-type{
bottom: -80px;
}
#fullSupport > section li:last-of-type {
bottom:-130px;
right: 0;
}
#fullSupport + .flexBox {
flex-wrap:nowrap;
}
@media screen and (max-width: 1280px){ 
#fullSupport > section h3 {
margin-top: 0;
}

#fullSupport > section li img {
height: 100%;
max-height: 500px;
object-fit: contain;
}

#fullSupport > section {
width: 100%;
}
}
@media screen and (max-width: 1000px){ 
#fullSupport > section li:first-of-type {
display: none;
}
#fullSupport > section {
width: 90%;
margin:  0 auto;
text-align: left;
}
#fullSupport > section figure {
margin:  3rem auto  0;
}
#fullSupport > section li img {
display: none;
}

}
@media screen and (max-width: 480px){
#fullSupport > section h3 {
font-size: 1.6rem;
}
#fullSupport > section {
margin:  0 auto;
}
#fullSupport > section figure {
margin: 3rem auto 0;
width:100%;
}
#fullSupport > section li {
display: none;
}
#fullSupport + .flexBox li:last-of-type {
display: none;
}
}


.tenjikai {
margin: 5rem auto;
box-shadow: 0 0 20px #ddd;
}

.tenjikai h4 {
padding: .8rem;
color: #fff;
background: #74B3E8;
font-size: 1.2rem;
font-weight: 700;
text-align: center;
}
.tenjikai.pink h4 {
background: #F08989;
}
.tenjikai .txtArea {
padding: 3rem;
display: flex;
flex-wrap:wrap;
justify-content: space-between;
}

.tenjikai .txtArea > * {
width: 48%;
}

.tenjikai .txtArea p {
text-align: left;
}
@media screen and (max-width: 480px){
.tenjikai .txtArea {
padding: 1rem;
}
.tenjikai .txtArea > * {
width: 100%;
}
.tenjikai .txtArea figure {
margin-bottom: 2rem;
}
}