@charset "utf-8";
/* レイアウトのためのCSS */
body{background:#f3d7e7;
font-family: 'Noto Serif JP', serif;
color: #222222;
font-size:1rem;
line-height:1.85;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%; 
word-wrap: break-word;
letter-spacing: 0.2em;
}

body.appear{background:#f8f9fa;}
ul{margin:0; padding: 0; list-style: none;}
*{box-sizing: border-box}

/* heading ===================================*/
#menu h2,
#blog h2{font-size: 4rem; text-align: center; margin: 0 0 50px 0; font-weight: normal; color: #eb6787;}
#news h2{font-size: 4rem; text-align: center; margin: 0 0 0px 0; font-weight: normal; color: #eb6787;}

/* area =====================================*/
#container{overflow-x: hidden;}
.inner{width:100%; margin:0 auto; padding:70px;}

/* splash ===================================*/
#splash-logo p{font-size:1.8rem; font-weight: normal; white-space: nowrap;}

/* header ===================================*/
.header-area{position: fixed; left:10%; top:50%; transform: translate(-10%,-50%); z-index: 2; color: #ffffff; text-align: left;}
.header-area h1{display: block; font-size: 6vw; font-weight: normal; line-height: 1; letter-spacing: 0; padding: 0 10px;}
.header-area p{font-size: 1.8vw; letter-spacing: 0.4em; margin: 0 10px;}
.header-area p br{display: none;}


/* gnavi ===================================*/
#g-nav-list li:nth-of-type(1) a{font-size: 1.5rem; text-transform: none; font-weight: normal; line-height: 1; white-space: nowrap; margin: 0 0 20px 0;}
#g-nav-list li:nth-of-type(2){    animation-delay: .2s;}
#g-nav-list li:nth-of-type(3){    animation-delay: .4s;}
#g-nav-list li:nth-of-type(4){    animation-delay: .6s;}
#g-nav-list li:nth-of-type(5){    animation-delay: .8s;}
#g-nav-list li:nth-of-type(6){    animation-delay: 1.1s;}
#g-nav-list li:nth-of-type(7){    animation-delay: 1.3s;}
#g-nav-list li:nth-of-type(7) span{display: block; font-weight: normal; font-size: 0.8em;}


/* lead ===================================*/
#lead{display: flex; flex-wrap: wrap; justify-content: space-between; padding-top:140px;}
#lead .lead-img{width:50%; padding: 0 2%;
min-height: 580px;
background: url("../img/lead.jpg") no-repeat center;
background-size: cover;
}

#lead .lead-area{width:50%; padding: 0 2%; text-align: center;
/*display: flex;*/ /*flex-wrap: wrap;*/ /*justify-content:space-around;*/ /*flex-direction: row-reverse;*/
}

#lead .lead-area h2,
#lead .lead-area p,
#lead .lead-area .lead-btn a{
/*縦文字 -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; text-orientation: upright;*/
}

#lead .lead-area h2{/*width:28%;*/ line-height:2.5; font-size:1.4rem;}
#lead .lead-area h2 span{/*width:28%;*/ font-size:1rem; color:#333333;}
#lead .lead-area p{/*width:48%;*/ padding: 50px 0; line-height: 2.8;}
#lead .lead-area .lead-btn{/*width:10%;*/ position: relative; /*top: 240px;*/}
/*#lead .btn04{padding:20px 15px;}*/

/* news ===================================*/
#news{padding: 80px 0; background: #f3d7e7; color: #000000; font-size:1rem;}
#news section{margin: 0 0 10px 0; }
#news time{display:block; padding:0; font-size:0.88rem; color: #555555;}
#news .news-area{display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 20px;}
#news .news-area_left{width:50%; padding: 0 2%;}
#news .news-area_right{width:50%; padding: 0 2%;}

/* menu ===================================*/
#menu{padding: 70px 0;}
#menu section{background: #ffffff; margin: 0 0 10px 0;  color: #000000;}
#menu section h3{font-size: 1.3rem; margin: 0 0 10px 0;}
#menu section h3 span{font-size: 0.8rem; margin: 0 0 0 2px; color:#888888;}
#menu section p{font-size: 1.3rem;}
#menu section p span{font-size: 0.8rem;}
#menu .menu-area{padding: 20px; box-shadow: 5px 0 10px #ccc;}
#menu .menu-btn{text-align: center; margin: 50px 0 0 0;}

/* blog ===================================*/
#blog{margin:0 0 50px 0;}
.blog-area{display: flex; justify-content: space-between; text-align: center; flex-wrap: wrap; overflow: hidden;}
.blog-area article:nth-of-type(1){width:30%;}
.blog-area .blog-block{width:68%; display: flex; justify-content: space-between; flex-wrap: wrap;}
.blog-area .blog-block article{margin:0 0 3vh 0;}
.blog-area .blog-block article:nth-of-type(1){width:39%; animation-delay: 0.5s;}
.blog-area .blog-block article:nth-of-type(2){width:34%; animation-delay: 1.5s;}
.blog-area .blog-block article:nth-of-type(3){width:21%; animation-delay: 1s;}
.blog-area .blog-block article:nth-of-type(4){width:35%; animation-delay: .8s;}
.blog-area .blog-block article:nth-of-type(5){width:20%; animation-delay: 1.8s;}
.blog-area .blog-block article:nth-of-type(6){width:17%; animation-delay: 1.5s;}
.blog-area .blog-block article:nth-of-type(7){width:22%; animation-delay: 1.5s;}
.blog-area h3{font-size:1.2rem; margin: 0 0 20px 0;}
.blog-area p{margin: 0 0 20px 0;}
.blog-area time{font-size: 1.2rem;}
.blog-area img{width: auto; height:32vh; object-fit: cover; object-position: 0% 50%; border: 1px solid #cccccc;}
.blog-area article:nth-of-type(1) img{height:67vh;}
.blog-area .blog-block article:nth-of-type(1) img{height:32vh;}
.blog-area figure p{position: absolute; bottom:0; left:0;
background:rgba(189,214,216,0.8);
display: block;
width:100%;
padding: 10px;
color: #000000;
font-size: 1.2rem; 
}
.blog-area span{border:1px solid rgba(255,255,255,0.7);
display: inline-block;
padding:5px 10px;
text-align: center;
font-size: 0.88rem;
white-space: nowrap;
color: #333333;
}

/* contact ===================================*/
#contact{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; flex-direction: row-reverse;}
#contact .contact-img{width:45%;
min-height: 300px;
background:url("../img/contact.jpg") no-repeat center;
background-size: cover;
}
#contact .contact-area{width:55%; text-align: center;}
#contact .contact-area h2{font-size:1.3rem; margin:0 0 18px 0;}

/* footer ===================================*/
#footer{border-top: 1px solid #ccc; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;}
#footer dl{width:30%;}
#footer dl dt{font-size: 1rem;}
#footer dl dd{font-size: 1.5rem;}
#footer .footer-list{width:65%; text-align: right;}
#footer ul li{display: inline-block; padding: 0 10px; font-size: 0.8rem; line-height: 3;}
#footer .company_nav li {margin: 0 auto; font-size:0.7rem;}
#footer .company_nav li a:before {color:#cccccc; margin:0 4px; font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f105";}
#footer hr {margin: 18px auto 0;}
#footer small{text-align: right; margin: 20px 0 0 0; display: block; width: 100%; font-size: 0.7rem;}
#footer #page-top span{display: inline-block; width: 13px; height: 13px; border-top: 4px solid #fff; border-left: 4px solid #fff; transform: rotate(45deg);}

/* ---------------------------------------------- */
/* content CSS ===================================*/
/* ---------------------------------------------- */
/* header-con ============================== */
#header-con{width: 100%; text-align: center;/* background-color: #ff0000;*/}
#header-con h1{margin:0 auto; padding: 3px 0;}

/* related_stage-contents ------------------------*/
#related_stage-contents {margin:0; padding:0; text-align: center; }
#related_stage-contents p{margin:0 auto 18px; }
#related_stage-contents h2{font-size: 1.8rem; margin: 48px auto; font-weight: normal;}
/* menuprice */
#related_stage-contents h4 {font-size: 1.2rem; font-weight: normal; margin:22px auto; color: #333333; letter-spacing:1px; line-height: 1.8em; text-align: center;}
#related_stage-contents h4 span{display: block;}
/* 法令 */
#related_stage-contents h5{font-size: 1.2rem; margin: 33px auto 0; font-weight: normal;}

/* inner-con ============================== */
.inner-con{width:100%; margin:0 auto; padding:30px 140px; text-align: left;} /* paddeing top 2倍 */
.inner-con:after{content: ""; display: block; clear: both}

.inner-con-coeur-top{width:100%; margin:0 auto; padding:30px 140px; text-align: left; background-color: #fcf3f8; border-top:solid 2px #df639d;} /* paddeing top 2倍 */
.inner-con-coeur-top:after{content: ""; display: block; clear: both}

.inner-con-coeur{width:100%; margin:0 auto; padding:30px 140px; text-align: left; background-color: #fcf3f8;} /* paddeing top 2倍 */
.inner-con-coeur:after{content: ""; display: block; clear: both}

.inner-con-glossy-top{width:100%; margin:0 auto; padding:30px 140px; text-align: left; background-color: #fcebe3; border-top:solid 2px #ec9071;} /* paddeing top 2倍 */
.inner-con-glossy-top:after{content: ""; display: block; clear: both}

.inner-con-glossy{width:100%; margin:0 auto; padding:30px 140px; text-align: left; background-color: #fcebe3;} /* paddeing top 2倍 */
.inner-con-glossy:after{content: ""; display: block; clear: both}

/* related_stage-contents eria 2カラム================= */
#related_stage-contents .eria-left {float: left; width: 50%; margin:0 auto; padding:0.5% 2% 0.5% 0;}
#related_stage-contents .eria-right {float: right; width: 50%; margin:0 auto; padding:0.5% 0 0.5% 2%;}

#related_stage-contents .eria-left-07 {float: left; width: 70%; margin:0 auto; padding:1%;}
#related_stage-contents .eria-right-03 {float: right; width: 30%; margin:0 auto; padding:1%;}
#related_stage-contents .eria-left-03 {float: left; width: 30%; margin:0 auto; padding:1%;}
#related_stage-contents .eria-right-07 {float: right; width: 70%; margin:0 auto; padding:1%;}
/*
#related_stage-contents .eria-left_border {float: left; width: 48%; margin:0 auto 22px; padding:8px 0.5%; border:solid 1px #cccccc; border-radius: 8px;}
#related_stage-contents .eria-right_border {float: right; width: 48%; margin:0 auto 22px; padding:8px 0.5%; border:solid 1px #cccccc; border-radius: 8px;}
*/
#related_stage-contents .eria-left_border {float: left; width: 48%; margin:0 auto 22px; padding:0.5% 5%; border:solid 1px #cccccc; border-radius: 8px;}
#related_stage-contents .eria-right_border {float: right; width: 48%; margin:0 auto 22px; padding:0.5% 5%; border:solid 1px #cccccc; border-radius: 8px;}