/* カスタマイズ用CSS */
.pc { display: block; }
.sp { display: none; }
.ec-headerNaviRole {
    padding-top:0px;
    padding-bottom: 0px;
}
@media only screen and (max-width: 750px) {
.pc { display: none; }
.sp { display: block; }
.ec-headerNaviRole {
    padding-top:0px;
    padding-bottom: 0px;
}
.ec-footerNavi .ec-footerNavi__link a {
    font-size: 1.3em;
}
}

.qr-banner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    max-width:500px;
    margin:30px auto;
    padding:20px 24px;
    background:linear-gradient(135deg,#4f7d3a,#79a85d);
    border-radius:18px;
    color:#fff;
    text-decoration:none;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    transition:.3s;
}

.qr-banner:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(0,0,0,.25);
}

.qr-banner__label{
    display:inline-block;
    padding:4px 10px;
    background:rgba(255,255,255,.2);
    border-radius:30px;
    font-size:11px;
    letter-spacing:.08em;
    margin-bottom:10px;
}

.qr-banner h3{
    margin:0 0 8px;
    font-size:24px;
    font-weight:700;
}

.qr-banner p{
    margin:0;
    line-height:1.7;
    font-size:14px;
    opacity:.95;
}

.qr-banner__image{
    flex-shrink:0;
    background:#fff;
    padding:10px;
    border-radius:12px;
}

.qr-banner__image img{
    display:block;
    width:120px;
    height:auto;
}

@media (max-width:640px){
.qr-banner{
display:none;
}
}
.menu-content ul {
    padding: 20px 10px 0;
}
.menu-content ul li {
    border-bottom: solid 1px #ffffff;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 1.3em;
    box-sizing: border-box;
    color:#ffffff;
    text-decoration: none;
    padding: 15px 15px 10px 0;
    position: relative;
}
.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}


.ec-newsRole .ec-newsRole__newsDate {
font-size: 1.2em;
}
.ec-newsRole .ec-newsRole__newsTitle {
    font-size: 1.2em;
    line-height: 1.2;
}

#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:0;
   margin:0;
   font-size: 16px;
   border-right: 1px solid #fff;
}
/*左側メニュー色*/
#sp-fixed-bb li:first-child{
   background: #CF2E92;
}
/*中側メニュー色*/
#sp-fixed-bb li:nth-child(2){
   background: #3b5998;
}
/*右側メニュー色*/
#sp-fixed-bb li:last-child{
   background: #228b22;
}

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

.box17{
    margin:1em 0;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 2px black;
    border-bottom: solid 2px black;
}
.box17:before, .box17:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: black;
}
.box17:before {left: 10px;}
.box17:after {right: 10px;}
.box17 p {
    margin: 0; 
    padding: 0;
}

/* 先頭に四角のアクセント */
.instah2 {
  position: relative; /* 擬似要素の基準 */
  background: #000000;
  padding: 0 0 .3em 2em;
  color: #ffffff; /* 文字色 */
  line-height: 1.8; /* 行高 */
  border-bottom: 1px solid currentColor;
  font-size: 1.3em;
}

/* 四角アクセント（共通） */
.instah2::before,
.instah2::after {
  content: '';
  position: absolute;
  background: #f5f5f5;
  opacity: .5;
}

/* 大きい四角 */
.instah2::before {
  top: .3em;
  left: .2em;
  width: 1em;
  height: 1em;
  z-index: 2;
}

/* 小さい四角 */
.instah2::after {
  top: .8em;
  left: .8em;
  width: .7em;
  height: .7em;
}


.section {
  text-align: center;
  padding: 100px 20px;
  position: relative;
  color: #003d66;
  overflow: hidden;
}
.section1 {
  background-color: #ffffff;
  margin: 1em 0 1em 0;
}
.section2 {
  background-color: #000000;
  padding: 3em 0 0 0;
}
.section3 {
  background-color: #6f5436;
}

.wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: 120px;
  overflow: hidden;
  line-height: 0;
}
.wave svg {
  display: block;
  width: 100%;
  height: 100%;
}
.wave-top {
  top: 0;
  transform: translateY(-100%);
}

.wave-bottom {
  bottom: 0;
}

#rob1 img{
    position: fixed;
    right: 0;
    top: 350px;
    z-index:10;
}

#rob2 img{
    position: fixed;
    right: 0;
    top: 400px;
    z-index:10;
}

#rob3 img{
    position: fixed;
    right: 0;
    top: 450px;
    z-index:10;
}  

.mekakusi {
position: relative;
margin: 0em auto -5em auto;
background-color: #ffffff;
max-width: 100%;
padding: 3em;
z-index: 10;
}
.cstm-box-tape {
position: relative;
margin: 0em auto 0em auto;
background-color: #000000;
max-width: 100%;
padding: 1em;
z-index: 0;
}
.kakupage2 {
  display: inline-block;
  padding: 0.5em 1em;
  color: #555555;
  background: #f0f0f0;
  border-left: 4px dotted rgba(0, 0, 0, 0.1);
  border-right: 4px dotted rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transform: rotate(-2deg);
}
.kakupage {
  position: relative;
  color: white;
  background: #81d0cb;
  line-height: 1.4;
  padding: 0.5em 0.5em 0.5em 1.8em;
}

.kakupage:before {
  font-family: "Font Awesome 5 Free";
  content: "\f14a";
  font-weight: 900;
  position: absolute;
  left : 0.5em; /*左端からのアイコンまでの距離*/
}

.ec-headerNavSP {
    padding: 0px;
    width: 48px;
    height: 44px;
    border-radius: 25% 10%;
    background: #000000;
    color: #ffffff;
}

.midashi_header1 {
 width: 100%;
 text-align: center;
 padding: 10px 20px;
 font-size: 2rem;
 font-weight: bold;
 position: relative;
 border: solid 1px;
 color:#c98077;
}
.midashi_header1::before {
 content: '';
 position: absolute;
 width: 100%;
 height: 100%;
 border: solid 1px;
 left: 10px;
 top: 7px;
}
.midashi_header1::after {
 content: '';
 position: absolute;
 background-color: black;
 width: 50px;
 height: 1px;
 right: -25px;
 top: 17px;
 transform: rotate(40deg);
}

.dela-gothic-one-regular {
  font-family: "Dela Gothic One", 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;
}
.m-plus-1p-regular {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.m-plus-rounded-1c-regular {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.allura-regular {
  font-family: "Allura", cursive;
  font-weight: 400;
  font-style: normal;
}

.heading07 {
	position: relative;
	padding-top: 50px;
	padding-left: 30px;
	font-size: 1.5em;
}

.heading07 span {
	position: relative;
	z-index: 2;
}

.heading07::before {
	content: attr(data-en);
	position: absolute;
	transform: rotate(-5deg);
	top: -10px;
	left: 0;
	color:rgb(8 81 11 / 74%);
	font-size: 2em;
	font-weight: 400;
	font-family: luxus-brut, cursive;
	font-style: italic;
}

.header-fixed {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 100;
    background-position: center center;
}

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

.ec-footerNavi {
    margin-top: 30px;
    margin-bottom: 0px;
    padding: 0;
    color: white;
    list-style: none;
    text-align: center;
}
.ec-footerNavi .ec-footerNavi__link a {
    font-size: 1.2em;
}

.heading01 {
  position: relative;
  z-index: 1;
  text-align: center;
  font-weight: bold;
  color: #333333;
  font-size:1.2em;
}

.heading01::before {
  content: attr(data-en);
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 45px;
  font-weight: bold;
  color: #f6a99f;
  z-index: -1;
  white-space: nowrap;
  letter-spacing: 0.1em;
  opacity: 0.6;
}


.kaku01 {
  clip-path: polygon(100% 0, 0 0, 50% 100%);
  height:10vmin;
  background-color:#D8E4E5; /* 背景色 */
}


.triangle {
  position: relative;
  background: #2c3e50;
  height: 50vh;
}

.triangle::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 25px 0 25px;
  border-color: #2c3e50 transparent transparent transparent;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
}
.instagram-section{
    max-width:1200px;
    margin:80px auto;
    padding:0 20px;
    text-align:center;
}

.instagram-section h2{
    font-size:38px;
    margin-bottom:40px;
}