/* ----- 共通パーツ ----- */
@keyframes showSlowly {
    0%{opacity: 0.4;}
    100%{opacity: 1;}
}

body.no-scroll{overflow: hidden;}

input:focus, textarea:focus {
    /*color: #BBAD83;*/
    border: none;
    outline: 2px solid #cdc4a8;
}

/* ボタン表示 */
.btn-wrap{margin-top: 45px;}
a:hover,
.btn:hover{opacity: 0.7; transition: 0.8s;}
.btn{
    background: linear-gradient(90deg, #BBAD83, #FFF1C7);
    width: 100%;
    text-align: center;
    padding: 10px;
    color: white;
    letter-spacing: 0.8em;
    border-radius: 10px;
    font-weight: bold;
    display: block;
}
.btn-bottom-msg{margin-top: 20px; text-align: center; letter-spacing: 0.6em; font-family: serif;}
.more-btn-wrap{display: flex; justify-content: center;}
.more-btn-wrap .btn{width: 50%; min-width: 330px;}
@media screen and (max-width:800px) {
    .btn-bottom-msg{font-size: 0.9em;}
}

/* アラート表示 */
.alert{margin-inline: auto; padding: 15px; border-radius: 10px; margin-top: 40px; margin-bottom: -20px;}
.alert-danger{color: #58151C; background: #F8D7DA; border: #F1AEB5 2px solid;}
.alert-info{color: #055160; background: #CFF4FC; border: #9EEAF9 2px solid;}

.alert,
.container .form-box{width: 500px; max-width: 90vw;}

.label{letter-spacing: 0.8em;}


/* ----- header ----- */
header .header-container{
    background: white;
    display: flex;
    justify-content: space-between;
}
header .header-container .header-logo-wrap{width: 300px; display: block; margin-inline: auto;}
@media screen and (max-width:800px) {
    header .header-container .header-logo-wrap{width: 260px;}
}

header #open-main-nav-sp{
    cursor: pointer; margin-left: auto; margin-right: 10px;
    width: 70px; height: 70px; border-radius: 40%; z-index: 20; position: absolute; top: 10px; right: 0;
    display: flex; justify-content: center; align-items: center;
}
header #open-main-nav-sp:hover{opacity: 0.7; transition: 0.5s;}
/*header.scroll-color #open-main-nav-sp{background: #0a79bb;}*/
header #open-main-nav-sp.open{background: none;}
header #open-main-nav-sp .open-nav-sp-container{width: 50%; position: relative;}
header #open-main-nav-sp .open-nav-sp-container .line{display: block; width: 100%; height: 3px; background: #BBAD83; border-radius: 1px; margin-bottom: 9px; transition: transform 0.4s;}
header #open-main-nav-sp .open-nav-sp-container .line:last-child{margin-bottom: 0;}
header #open-main-nav-sp.open .open-nav-sp-container .line{position: absolute; top: 50%; background: #ac9a58 !important;}
header #open-main-nav-sp.open .open-nav-sp-container .line:first-child{transform: translate3d(0,-50%,0) rotate(45deg); }
header #open-main-nav-sp.open .open-nav-sp-container .line.line-middle{display: none;}
header #open-main-nav-sp.open .open-nav-sp-container .line:last-child{transform: translate3d(0,-50%,0) rotate(-45deg);}

header #main-nav-sp{display: none; position: fixed; top: 0; left: 0; background: rgba(214, 202, 176, 0.95); width: 100vw; height: 100vh; z-index: 15; animation: showSlowly 0.5s ease-out;}
header #main-nav-sp.active{display: flex; position: absolute; justify-content: center; align-items: center;}
header #main-nav-sp .nav-container{overflow-y: scroll; width: 100%; height: 100vh; display: flex; justify-content: center;}
header #main-nav-sp .nav-container ul{margin: 20px; width: 40%; min-width: 310px;}
header #main-nav-sp .nav-container ul li{border-bottom: 2px solid rgba(255, 255, 255, 0.05);}
header #main-nav-sp .nav-container ul li:last-child{border: none;}
header #main-nav-sp .nav-container ul li.dropdown-items{background: rgba(216, 193, 150, 0.98); position: static; animation: showSlowly 0.5s ease-out;}
header #main-nav-sp .nav-container ul li a,
header #main-nav-sp .nav-container ul li button{display: block; width: 100%; padding: 20px; cursor: pointer;}
header #main-nav-sp .nav-container ul li a:hover,
header #main-nav-sp .nav-container ul li button:hover{opacity: 0.6;}

header #main-nav-sp .nav-container ul li a{display: flex; align-items: center;}
header #main-nav-sp .nav-container ul li a .img-wrap{width: 40px; display: inline-block; margin: 0 5px;}
header #main-nav-sp .nav-container ul li a .img-wrap .logo{object-fit: contain; width: 100%; height: auto;}


/* ----- container ----- */
.container{
    background: white;
    width: 90%;
    max-width: 1200px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.container .inner{
    width: inherit;
    margin: 55px 0;
}

.container .content-top-block{display: flex; justify-content: space-between; margin-bottom: 30px;}
.container .content-top-block .title{font-size: 1.1em; letter-spacing: 0.8em;}



/* ----- form-box ----- */
.container .form-box{
    border: solid 2px;
    border-image: linear-gradient(to right, #BBAD83, #e0d9c1);
    border-image-slice: 1;
    margin-inline: auto;
    padding: 40px;
    margin: 55px 0;
}
.container .form-box .title{font-size: 1.2em; letter-spacing: 0.8em; text-align: center; color: #BBAD83; font-weight: bold; font-family: serif;}
.container .form-box form label{display: block; width: 100%; margin-top: 30px;}
.container .form-box form label input{
    display: block;
    width: 100%;
    margin-top: 3px;
    padding: 10px;
    border-radius: 10px;
    border: solid 2px #cdc4a8;
    /*border-image: linear-gradient(to right, #BBAD83, #e0d9c1);*/
    /*border-image-slice: 1;*/
}


/* ----- videos ----- */
.videos{
    display: flex;
    flex-wrap: wrap;
}
.videos li{
    padding: 10px;
    width: 33%;
}
.videos li iframe{width: 100%; height: 210px;}

@media screen and (max-width:1100px) {
    .videos li{width: 50%;}
    .videos li iframe{height: 230px;}
}
@media screen and (max-width:900px) {
    .videos li iframe{height: 180px;}
}
@media screen and (max-width:630px) {
    .videos li iframe{height: 150px;}
}
@media screen and (max-width:480px) {
    .videos li{width: 100%;}
    .videos li iframe{height: 180px;}
}


/* footer */
footer{background: linear-gradient(90deg, #EEE7CB, #fffae7); height: 130px; display: flex; align-items: center; justify-content: center;}
footer .footer-container{display: flex; align-items: center; justify-content: center; width: 90%;}
footer .footer-container .left{width: 40%; display: flex; justify-content: start;}
footer .footer-container .left .footer-logo-wrap{width: 100px; display: block;}
footer .footer-container .right{width: 60%; display: flex; justify-content: end;}
footer .footer-container .right li{line-height: 1.5em;}

@media screen and (max-width:800px) {
    footer .footer-container .right li{font-size: 0.8em;}
}