/* カスタマイズ用CSS */
.pc { display: block; }
.sp { display: none; }
@media only screen and (max-width: 750px) {
.pc { display: none; }
.sp { display: block; }
}

/*==========================================
    FOOTER
==========================================*/

.footer{
    color:#fff;
    margin-top:0px;
}

.footer a{
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.footer a:hover{
    color:#d6b66f;
}

.footer-inner{
    max-width:1200px;
    margin:auto;
    padding:50px 50px 0px;
    font-size:1.2em;
}

/*==========================================
    LOGO
==========================================*/

.footer-logo{
    text-align:center;
    margin-bottom:60px;
}

.footer-logo svg{
    max-width:260px;
    width:50%;
}

/*==========================================
    CONTENT
==========================================*/

.footer-content{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    margin-bottom:60px;
}

.footer-content h3{
    font-size:14px;
    letter-spacing:.15em;
    color:#d6b66f;
    margin-bottom:25px;
    text-transform:uppercase;
}

/*==========================================
    COMPANY
==========================================*/

.footer-company p{
    line-height:2;
    margin-bottom:25px;
    color:rgba(255,255,255,.8);
}

.footer-company dl{
    display:grid;
    grid-template-columns:90px 1fr;
    row-gap:12px;
}

.footer-company dt{
    color:#d6b66f;
    font-weight:bold;
}

.footer-company dd{
    margin:0;
}

/*==========================================
    SITE MAP
==========================================*/
.footer-nav ul{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px 35px;
    list-style:none;
    padding:0;
    margin:0;
}
.footer-nav li{
    border-bottom:1px solid rgba(255,255,255,.12);
    padding-bottom:10px;
}
.footer-nav a{
    display:block;
}
.footer-nav a:hover{
    padding-left:8px;
}

/*==========================================
    CONTACT
==========================================*/
.footer-contact{
    text-align:center;
    margin-bottom:55px;
}
.footer-contact .lead{
    font-size:15px;
    margin-bottom:20px;
    color:rgba(255,255,255,.8);
}
.contact-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:320px;
    height:58px;
    border:1px solid #d6b66f;
    border-radius:4px;
    font-weight:700;
    letter-spacing:.08em;
}
.contact-btn:hover{
    background:#d6b66f;
    color:#123c30;
}

/*==========================================
    INSTAGRAM
==========================================*/
.footer-sns{
    text-align:center;
    margin-bottom:40px;
}
.footer-sns a{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-size:16px;
}
.footer-sns i{
    width:48px;
    height:48px;
    border:1px solid rgba(255,255,255,.3);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    transition:.3s;
}
.footer-sns a:hover i{
    background:#fff;
    color:#123c30;
    border-color:#fff;
}

/*==========================================
    COPYRIGHT
==========================================*/

.footer-copy{
    text-align:center;
    border-top:1px solid rgba(255,255,255,.12);
    padding-top:25px;
}
.footer-copy small{
    color:rgba(255,255,255,.6);
    font-size:13px;
    letter-spacing:.08em;
}

/*==========================================
    RESPONSIVE
==========================================*/

@media (max-width:768px){
.footer-inner{
    padding:50px 20px 25px;
    font-size: 1.3em;
}
.footer-logo{
    margin-bottom:40px;
}
.footer-content{
    grid-template-columns:1fr;
    gap:45px;
    margin-bottom: 0px;
}
.footer-company dl{
    grid-template-columns:80px 1fr;
}
.footer-nav ul{
    grid-template-columns:1fr;
}
.contact-btn{
    width:100%;
}
.footer-sns a{
    justify-content:center;
}
.footer-content h3 {
    font-size: 1.5em;
    letter-spacing: .15em;
    color: #d6b66f;
    margin-bottom: 25px;
    text-transform: uppercase;
}
}

/* ===============================
   Mobile Menu
=============================== */
.sp-menu{
    width:100%;
    height:AUTO;
    background:linear-gradient(135deg,#0d3b2f 0%,#1b5a45 100%);
}
.sp-menu ul{
    margin:0;
    padding:10px 0;
    list-style:none;
}
.sp-menu li{
    border-bottom:1px solid rgba(255,255,255,.15);
}
.sp-menu li:first-child{
    border-top:1px solid rgba(255,255,255,.15);
}
.sp-menu a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 30px;
    color:#fff;
    text-decoration:none;
    transition:.3s;
}
.sp-menu a:hover{
    background:rgba(255,255,255,.06);
}
.sp-menu .text{
    display:flex;
    flex-direction:column;
}
.sp-menu .ja{
    font-size:1.5em;
    font-weight:700;
    line-height:1.4;
    color:#fff;
}
.sp-menu .en{
    margin-top:6px;
    font-size:1.3em;
    letter-spacing:.25em;
    color:#c9b173;
    text-transform:uppercase;
}
/* 矢印 */
.sp-menu .arrow{
    width:32px;
    height:32px;
    position:relative;
    flex-shrink:0;
}
.sp-menu .arrow::before{
    content:"";
    position:absolute;
    top:50%;
    right:6px;
    width:10px;
    height:10px;
    border-top:2px solid #fff;
    border-right:2px solid #fff;
    transform:translateY(-50%) rotate(45deg);
    transition:.3s;
}
.sp-menu a:hover .arrow{
    transform:translateX(6px);
}
/* タップ時 */
.sp-menu a:active{
    background:rgba(255,255,255,.1);
}
/* スマホ */
@media (max-width:768px){
    .sp-menu .ja{
        font-size:1.5em;
    }
    .sp-menu .en{
        font-size:1em;
    }
    .sp-menu a{
        padding:15px 24px;
    }
}

/*====================================
  Bottom Area
====================================*/
.kf-bottom{
    margin-top:auto;
    padding:35px 30px;
    border-top:1px solid rgba(255,255,255,.12);
}
.kf-bottom small{
    display:block;
    color:#ffffff;
    font-size:1.2em;
    line-height:1.5;
}
/*====================================
  Phone
====================================*/
.kf-phone {
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:25px;
}
.kf-phone .icon{
    width:50px;
    height:50px;
    border-radius:50%;
    background:#fff;
    color:#0f3b2d;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1.5em;
    flex-shrink:0;
}
.kf-phone small{
    display:block;
    color:#000000;
    font-size:1.2em;
    line-height:1.5;
    background-color: #fff;
}
.kf-phone a{
    display:block;
    margin:6px 0;
    color:#fff;
    font-size:1.6em;
    font-weight:700;
    text-decoration:none;
    transition:.3s;
}

.kf-phone a:hover{
    color:#d8c07b;
}


.ec-blockTopBtn {
    display: none;
    position: fixed;
    width: 110px;
    height: 40px;
    right: 0;
    bottom: 60px;
}
#sp-fixed-bb{
   position: fixed;
   width: 100%;
   bottom: 0px;
   font-size: 0;
   opacity: 0.9;
   z-index: 99;
}
#sp-fixed-bb ul{
   display: flex;
   list-style: none;
   padding:0;
   margin:0;
   width:100%;
}
#sp-fixed-bb li{
   justify-content: center;
   align-items: center;
   width: 33.3%;
   padding:15px 0;
   margin:0;
   font-size: 16px;
   border-right: 1px solid #fff;
}
/*左側メニュー色*/
#sp-fixed-bb li:first-child{
   background: #994c4c;
}
/*中側メニュー色*/
#sp-fixed-bb li:nth-child(2){
   background: #003fff;
}
/*右側メニュー色*/
#sp-fixed-bb li:last-child{
   background: #3f7f00;
}

#sp-fixed-bb li a{
   color: #fff;
   text-align: center;
   display:block;
   width: 100%;
   padding:3px;
}


.ec-menuButton{
    display:block;
    width:100%;
    padding:16px 20px;
    border:2px solid #111;
    border-radius:50px;
    background:#111;
    color:#fff;
    text-align:center;
    text-decoration:none;
    font-size:15px;
    font-weight:700;
    letter-spacing:.08em;
    transition:.3s;
}
.ec-menuButton:hover{
    background:#fff;
    color:#111;
}
.ec-menuButton::after{
    content:" →";
    font-weight:400;
}
.ec-headerNavSP {
    margin-top:8px;
    padding: 0px;
    width: 48px;
    height: 44px;
    border-radius: 25% 10%;
    background: #000000;
}
.ec-newsRole .ec-newsRole__news {
    border: 0px solid #F8F8F8;
    padding: 5px 20px;
}
.ec-newsRole .ec-newsRole__newsDate {
    display: inline-block;
    margin: 0;
    min-width: 120px;
    font-size: 1.2em;
}
.ec-newsRole .ec-newsRole__newsTitle {
    display: inline-block;
    margin-bottom: 10px;
    width: 90%;
    font-size: 1.2em;
    line-height: 1.4;
}
.mochiy-pop-one-regular {
  font-family: "Mochiy Pop One", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.allura-regular {
  font-family: "Allura", cursive;
  font-weight: 400;
  font-style: normal;
}
.m-plus-rounded-1c-regular {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.dela-gothic-one-regular {
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.m-plus-1p-regular {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.yuji-boku-regular {
  font-family: "Yuji Boku", serif;
  font-weight: 400;
  font-style: normal;
}
.yuji-syuku-regular {
  font-family: "Yuji Syuku", serif;
  font-weight: 400;
  font-style: normal;
}


.br-sp {
  display: none;
}
@media screen and (max-width: 600px) {
  .br-sp {
    display: block;
  }
}

#ohtsubo {
  stroke:#000;
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  stroke-width: 1;
  -webkit-animation: hello 4s ease-in 0s;
  animation: hello 4s ease-in 0s;
}
@-webkit-keyframes hello {
  0% {
    stroke-dashoffset: 2000;
    fill:transparent;
  }
  40% {
    stroke-dashoffset: 2000;
    fill:transparent;
  }
  50% {
    fill:transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill:#000;
  }
}
#ohtsubo1 {
  stroke:#994C4C;
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  stroke-width: 1;
  -webkit-animation: hello1 4s ease-in 0s;
  animation: hello1 4s ease-in 0s;
}
@-webkit-keyframes hello1 {
  0% {
    stroke-dashoffset: 2000;
    fill:transparent;
  }
  40% {
    stroke-dashoffset: 2000;
    fill:transparent;
  }
  50% {
    fill:transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill:#994C4C;
  }
}

#ohtsubo2 {
  stroke:#003FFF;
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  stroke-width: 1;
  -webkit-animation: hello2 4s ease-in 0s;
  animation: hello2 4s ease-in 0s;
}
@-webkit-keyframes hello2 {
  0% {
    stroke-dashoffset: 2000;
    fill:transparent;
  }
  40% {
    stroke-dashoffset: 2000;
    fill:transparent;
  }
  50% {
    fill:transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill:#003FFF;
  }
}

#ohtsubo3 {
  stroke:#3f7f00;
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  stroke-width: 1;
  -webkit-animation: hello3 4s ease-in 0s;
  animation: hello3 4s ease-in 0s;
}
@-webkit-keyframes hello3 {
  0% {
    stroke-dashoffset: 2000;
    fill:transparent;
  }
  40% {
    stroke-dashoffset: 2000;
    fill:transparent;
  }
  50% {
    fill:transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill:#3f7f00;
  }
}

#logo1 {
  stroke:#3f7f00;
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  stroke-width: 1;
  -webkit-animation: hellol1 4s ease-in 0s;
  animation: hellol1 4s ease-in 0s;
}
@-webkit-keyframes hellol1 {
  0% {
    stroke-dashoffset: 2000;
    fill:transparent;
  }
  40% {
    stroke-dashoffset: 2000;
    fill:transparent;
  }
  50% {
    fill:transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill:#3f7f00;
  }
}

#logo2 {
  stroke:#003FFF;
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  stroke-width: 1;
  -webkit-animation: hellol2 4s ease-in 0s;
  animation: hellol2 4s ease-in 0s;
}
@-webkit-keyframes hellol2 {
  0% {
    stroke-dashoffset: 2000;
    fill:transparent;
  }
  40% {
    stroke-dashoffset: 2000;
    fill:transparent;
  }
  50% {
    fill:transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill:#003FFF;
  }
}

#logo3 {
  stroke:#994C4C;
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  stroke-width: 1;
  -webkit-animation: hellol3 4s ease-in 0s;
  animation: hellol3 4s ease-in 0s;
}
@-webkit-keyframes hellol3 {
  0% {
    stroke-dashoffset: 2000;
    fill:transparent;
  }
  40% {
    stroke-dashoffset: 2000;
    fill:transparent;
  }
  50% {
    fill:transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill:#994C4C;
  }
}


.ec-sliderRole {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1920px;
}




.oneArea01 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
}

.oneArea02 {
  display: flex;
  background: #26394c;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
}

.parent {
  display: flex;
  align-items: center; /* 縦の中央揃え */
}


.header-fixed {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 100;
    height: 80px;
}
.header01{
    width:100%;
    display:flex;
    padding:0 15px;
    top:0;
    left:0;
}

.ul01{
    display:flex;
    list-style:none;
}
.li01{
    margin-left:0px;
}

.nav01{
    margin-left:auto;
}


.mt10 {  font-size: 2em;
  font-weight: 700;
  color: #FFF;
  text-align: left;
  text-shadow: 0 2px 4px rgba(0,0,0,.5);
  margin: 5px 0;
}

.mt11 {  font-size: 2em;
  font-weight: 700;
  color: #575757;
  text-align: left;
  text-shadow: 0 2px 4px rgba(0,0,0,.5);
  margin: 5px 0;
}

.mt12{
	position: relative;
	font-size: 1.5em;
	font-weight:900;
	text-align: center;
	border-bottom: 5px solid #dddddd;
}

.mt12::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);
	width: 70px;
	height: 5px;
	background-color: #003fff;
}


.f12 {font-size: 1.1em; 
 font-family:Arial;}
 
.f13 {font-size: 3em; 
 color:#FFF;
 font-family:Arial Black;}
 
.f14 {font-size: 1.5em; 
 color:#FFF;
 font-family:Arial Black;}
 
.f15 {font-size: 1.1em; 
 color:#FFF;
 font-family:Arial;}
 
.f16 {font-size: 1.1em; 
 line-height: 2.0;
 }
.f17 {font-size: 1.1em; 
 line-height: 2.0;
 font-family:Arial Black;
 color:#aaaaaa;}
 
.ec-role2 {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1150px;
}

.ec-role3 {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1920px;
}

.ec-footerRole {
  border-top: 1px solid #FFF;
  margin-top: 50px;
  background-image:url('/html/user_data/assets/img/footer/footerh2.png');
  background-color:#fff;
}

.ec-footerNavi {
    margin-top: 50px;
    margin-bottom: 0px;
    padding: 0;
    color: white;
    list-style: none;
    text-align: center;
}

.waku01 {
width: 100%;
}

.waku01 th,
.waku01 td {
border: 1px solid #ccc;
padding: 10px;
}

.waku01 th {
font-weight: bold;
width: 20%;
background-color: #dedede; 
}

@media screen and (max-width: 767px) {
.waku01 {
width: 100%;
}
.waku01 tr,
.waku01 td,
.waku01 th {display:block;}
.waku01 th {width:auto;}

}



.hm04 {
  display: flex;
  align-items: center;
  padding: .5em .7em;
  background-color: #f2f2f2;
  color: #333333;
}

.hm04::before {
  display: inline-block;
  width: 5px;
  height: 1.5em;
  margin-right: .5em;
  background-color: #2589d0;
  content: '';
}

.hm05{
	display: inline;
	font-size: 1.3em;
	font-weight:bold;
	background-image: linear-gradient(rgba(0,0,0,0) 70%, rgb(252,81,133) 70%);
}

.hm06{
text-shadow: #fff 2px 0, #fff -2px 0, #fff 0 -2px, #fff 0 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px, rgba(0, 0, 0, .5) 3px 3px 3px;
}

.box05 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #994c4c;
    border-radius: 8px;
}
.box05 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 1.5em;
    background: #FFF;
    color: #994c4c;
    font-weight: bold;
}
.box05 p {
    margin-top: 10px; 
    padding: 0;
}


.hm07{
  position: relative;
  display: inline-block;
  margin: 1rem 0 1rem -10px;
  padding: 1rem 3rem;
  color: #fff;
  font-size: 1.4em;
  font-weight: bold;
  border-radius: 0 100vh 100vh 0;
  background: #0075a9;
  -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
}

.hm07:before {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 0;
  height: 0;
  content: '';
  border-top: 10px solid #005276;
  border-left: 10px solid transparent;
}


.cb01 {
  margin: 1em auto;
  padding: 1em 1em;
  background-color: #fff5cf; /* ボックスの背景色 */
  border-radius: 7px;
  max-width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* タイトル部分 */
.cb01 .box-title {
  display: flex;
  align-items: center;
  color: #eba500; /* アイコン・タイトルの色 */
  font-size: 1.3em;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 0.5em;
}

/* アイコン（疑似要素） */
.cb01 .box-title::before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c"; /* チェックマーク */
  font-weight: bold;
  margin-right: 8px;
  display: flex; /* 垂直中央配置 */
  align-items: center;
  justify-content: center;
}

/* ボックス内の本文 */
.cbox01 p { margin: 0; }



.qa-1 {
  max-width: 100%;
  margin-bottom: 7px;
  border: 1px solid #d6dde3;
  border-radius: 5px;
}

.qa-1 summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1em 2em 1em 3em;
  color: #333333;
  font-weight: 600;
  cursor: pointer;
}

.qa-1 summary::before,
.qa-1 p::before {
  position: absolute;
  left: 1em;
  font-weight: 600;
  font-size: 1.3em;
}

.qa-1 summary::before {
  color: #75bbff;
  content: "Q";
}

.qa-1 summary::after {
  transform: translateY(-25%) rotate(45deg);
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-bottom: 3px solid #333333b3;
  border-right: 3px solid #333333b3;
  content: '';
  transition: transform .5s;
}

.qa-1[open] summary::after {
  transform: rotate(225deg);
}

.qa-1 p {
  position: relative;
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: .3em 3em 0.5em;
  color: #333333;
  transition: transform .5s, opacity .5s;
}

.qa-1[open] p {
  transform: none;
  opacity: 1;
}

.qa-1 p::before {
  color: #ff8d8d;
  line-height: 1.2;
  content: "A";
}


.mt13 {
  position: relative;
  padding: 0.6em;
  background: #eaf6df;
  font-size: 1.2em;
  font-weight: bold;
  color: #3f7f00; 
}

.mt13:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #eaf6df;
  width: 0;
  height: 0;
}