@charset "UTF-8";
/* CSS Document */
img{ width:100%; display: block;}
.sp{
    display: none;
}
a{
    text-decoration: none;
    transition: 0.5s ;
    color: #333333;
}
img.object-fit-img{
    object-fit: cover;
    object-position:center; 
    font-family: 'object-fit: cover; object-position: center;'
}
p{
  text-align:justify; 
  text-justify:inter-ideograph; 
  text-justify:inter-character; 
  word-wrap:break-word; 
  overflow-wrap:break-word;
}
/*font*/
html{
    font-size: 62.5%;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
}
body{
    font-size:1.6rem;
    color: #333333;
    /*overflow: hidden;*/
}


/*装飾*/
.shutter{ opacity: 0;}
.shutter-text{ opacity: 0;}
.is-visible{ opacity: 1;}
.is-visible.shutter-text{ overflow: hidden; animation: shutter-text-open 1.0s ease-in forwards;transform-origin:100% 0}
.is-visible.shutter{ position: relative;}
.is-visible.shutter:after{ content: ''; display: block; width:100%;height:100%; position: absolute; top:0; left:0; background-color: #ffffff; animation: shutter-open 1.5s ease-in-out forwards;transform-origin:100% 0}
@keyframes shutter-open{
    from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
@keyframes shutter-text-open{
    from {
    width:0
  }
  to {
    width:100%;
  }
}



.fade{ opacity: 0;}
.is-visible.fade{ position: relative; animation: fade-in 1.5s 0.5s ease-in-out forwards; opacity: 0;}
@keyframes fade-in{
    from {
    opacity:0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}








/*SETTING*/
:root {
  --content-brand-blue: #0768ab;
  --content-brand-darkred: #b9144b;
  --content-brand-green: #009aa1;
  --content-brand-lightgreen: #ccebec;
  --content-brand-orange: #e95513;
  --content-brand-beige: #f0ede2;
  --content-brand-yellow: #ffff00;
}
.marker {background:linear-gradient(transparent 60%, #ffff00 60%); font-weight: 600;}
.btn_contact{ font-size:1.6rem; font-weight: 500; color: #ffffff; background-color: var(--content-brand-blue); display: flex; justify-content: center; align-items: center; padding:0.8rem 1.6rem; border-radius:2.4rem}
.btn_contact:before{ content:''; height: 1.6rem; width:2.2rem; background-image: url(images/icon_mail.png); background-position: center; background-size: contain; background-repeat: no-repeat; display: block; margin-right: 0.8rem;}
.btn_contact:after{ content:''; width:1.0rem; height:1.0rem; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; transform: rotate(-45deg); display: block; margin-left: 0.8rem;}
.btn_contact:hover{ background-color: var(--content-brand-darkred);}
.std{ display: flex; flex-direction: column;}
.std strong{ font-size:3.6rem; font-weight: 600; color: #ffffff; display: flex; padding:1.6rem 2.4rem; width:68%; margin-bottom: 1.6rem;}
.std strong.black{ background-color: #000000; justify-content: flex-end; align-self: flex-start; padding-left: 0;}
.std strong.darkred{ background-color: var(--content-brand-darkred); justify-content: flex-start; align-self: flex-end; padding-right: 0;}


/*BASE*/
header .inner{ max-width:1000px; width:98%; margin:0 auto; display: flex; justify-content: space-between; align-items: center;height:7.0rem;}
header .inner h1{ width:12.0rem; }
header .inner h1 strong{font-size:1.0rem; font-weight: 600; color: var(--content-brand-blue); display: block; font-feature-settings: "palt"; letter-spacing: -0.05rem; white-space: nowrap;}
header .inner h1 strong .darkred{font-weight: 600; color: var(--content-brand-darkred);}
footer { padding:7.2rem 0 0 0}
footer .inner{ width:90%; max-width:750px; margin:0 auto}
footer .inner .service-data dl{ display: flex; justify-content: space-between; align-items: center; width:100; margin-bottom: 3.2rem;}
footer .inner .service-data dt{ width:22.7rem;}
footer .inner .service-data dt img{ margin-bottom: 0.8rem;}
footer .inner .service-data dd{ width:calc(100% - 28rem);}
footer .inner .service-data dd ul{ display: flex;justify-content: space-between; align-items: center;}
footer .inner .service-data dd li{ width:30%}
footer .service-data dt strong{font-size:1.8rem; font-weight: 600; color: var(--content-brand-blue); display: block; font-feature-settings: "palt"; letter-spacing: -0.05rem; white-space: nowrap; text-align: center; margin-bottom: 0.8rem;}
footer .service-data dt strong .darkred{font-weight: 600; color: var(--content-brand-darkred);}
footer .inner .service-data dd strong{font-size:1.8rem; font-weight: 600; color: var(--content-brand-blue); display: block; font-feature-settings: "palt"; letter-spacing: -0.05rem; white-space: nowrap; margin-bottom: 0.8rem;}
footer .inner .company-data dl{ display: flex; justify-content: space-between; margin-bottom: 4.8rem;}
footer .inner .company-data dt{ width:25%;}
footer .inner .company-data dd{ width:35%; font-size: 1.4rem;}
footer .inner .company-data dd .ttl{ display: block; font-size:2.4rem; font-weight: 600;}
footer .inner .company-data dd strong{ font-weight: 600; font-size: 1.8rem;}
footer .copyright{ text-align: center; font-size:1.6rem; background-color: var(--content-brand-darkred); color: #ffffff; padding:1.6rem 0}

/*CONTENT*/
.mv { overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 85.2%, 50% 100%, 0 85.2%);}
.mv figure{aspect-ratio: 128 / 53; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden;}
.mv figure video{ width:100%; height: auto; object-fit: cover; aspect-ratio: 128 / 53; object-position: top;}
.mv figure .bg{ content: ''; width:100%; height:100%; /*background-image: url(images/bg_mv.png); background-size: cover;*/ position: absolute; object-fit: cover; opacity: 0.5;}
.mv figure .badge{ position: absolute; right:0;top:0; width:28%; max-width: 28.0rem; display: block;}
.mv figure .badge_left{ position: absolute; left:0;top:0; width:28%; max-width: 28.0rem; display: block;}
.mv figcaption{ width:75%; position: absolute; display: flex; justify-content:flex-end; align-items: flex-start;}
.mv figcaption .service-title{width:33.3%; position: relative; top:-10.0rem}
.mv .description{ background-color: var(--content-brand-green);}
.mv .description .inner{ display: flex; justify-content: center; align-items: center;}
.mv .description p {font-size:4.8rem; font-weight: 600; color: #ffffff; margin: 0 2.4rem 2.4rem 0;}
.mv .description img{ width:24rem; position: relative; margin: -7.2rem 0 0 2.4rem;}
.cta{ padding:7.2rem 0;}
.cta .inner{width:90%; max-width:750px; margin:0 auto}
.cta .inner a:hover{ opacity: 80%;}
.introduction{ padding:7.2rem 0; background-color: var(--content-brand-lightgreen);}
.introduction .inner{ width:90%; max-width:750px; margin: 0 auto;}
.introduction h2{ display: flex; align-items: center; justify-content: center; font-size:4.8rem; font-weight: 600; text-align: center; margin-bottom: 2.4rem;}
.introduction h2 figure{ width:24.0rem;}
.introduction h2 figure img{ width:100%;}
.introduction h2 figcaption{font-size:2.0rem; font-weight: 600; color: var(--content-brand-blue); display: block; font-feature-settings: "palt"; letter-spacing: -0.05rem; white-space: nowrap;}
.introduction h2 figcaption .darkred{font-weight: 600; color: var(--content-brand-darkred);}
.introduction h2+p {text-align: center; font-size: 1.8rem; line-height: 2; font-weight: 600; margin-bottom: 2.4rem;}
.introduction h2+p strong { font-size: 3.0rem; font-weight: 600;}
.introduction dl{ text-align: center;}
.introduction dt{ background-color: var(--content-brand-darkred); padding: 0.8rem 0; color: #ffffff; font-weight: 600; font-size:4.8rem; border-radius: 2.4rem; margin-bottom: 1.6rem; font-feature-settings: "palt"}
.introduction dt strong{font-size:6.4rem; font-weight: 600;}
.introduction dd.text{ font-size:2.4rem; font-weight: 600; margin-bottom: 2.4rem;}
.introduction dd.step{ display: flex; justify-content: space-between;}
.introduction dd.step .box{ width:47.5%; background-color: #ffffff; padding:2.4rem; text-align: center;}
.introduction dd.step p{ font-size: 1.8rem; font-weight: 500; text-align: center; margin-bottom: 2.4rem;}
.introduction dd.step img{ width:40%; margin:0 auto 1.6rem auto}
.introduction dd.pc{ padding:2.4rem}

.usage:has(input#box_pamphlet:checked) label[for="box_pamphlet"]{ background-color: var(--content-brand-green); color: #ffffff;}
.usage:has(input#box_pop:checked) label[for="box_pop"]{ background-color: var(--content-brand-green); color: #ffffff;}
.usage:has(input#box_menubook:checked) label[for="box_menubook"]{ background-color: var(--content-brand-green); color: #ffffff;}
.usage:has(input#box_shopcard:checked) label[for="box_shopcard"]{ background-color: var(--content-brand-green); color: #ffffff;}
.usage:has(input#box_event:checked) label[for="box_event"]{ background-color: var(--content-brand-green); color: #ffffff;}
.usage:has(input#box_photospot:checked) label[for="box_photospot"]{ background-color: var(--content-brand-green); color: #ffffff;}
.usage:has(input#box_exhibit:checked) label[for="box_exhibit"]{ background-color: var(--content-brand-green); color: #ffffff;}



.capability{ padding:7.2rem 0; background-color: var(--content-brand-green);}
.capability h2{ margin-bottom: 2.4rem;}
.capability .inner{ width:90%; max-width:750px; margin: 0 auto;}
.capability h3{ font-size:2.2rem; font-weight: 600; margin-bottom: 2.4rem; color: #ffffff;}
.capability h3+p{ font-size:1.6rem; font-weight: 400; margin-bottom: 2.4rem; color: #ffffff; font-feature-settings: "palt"; line-height: 1.8;}
.capability ul{ display: flex; justify-content: space-between; }
.capability li{ width:24%; background-color: #ffffff; padding:2.4rem 0; text-align: center;}
.capability li img{width:66%; margin:0 auto 0.8rem auto}
.capability li h4{ font-size:2.4rem ; font-weight: 600; margin-bottom: 0.8rem;}
.capability li .text{ font-size:1.4rem; }
.usage{ padding:7.2rem 0}
.usage h2{ margin-bottom: 2.4rem;}
.usage .inner{ width:90%; max-width: 750px; margin:0 auto 2.4rem auto; position:relative}
.usage .switch { position:sticky; top:0; z-index:10}
.usage .switch ul{ display: flex; flex-wrap: wrap; border:1px solid #000000; border-style:solid none none solid;}
.usage .switch li{ width:25%; border:1px solid #000000;  border-style:none solid solid none; text-align: center; background-color:#ffffff}
.usage .switch li label{ display: block; padding:1.6rem 0; cursor: pointer; transition: 0.5s all;}
.usage .switch li label:hover{ background-color: var(--content-brand-green); color: #ffffff;}
.usage .box{ display: none; padding:4.8rem}
.usage input{ display: none;}
.usage .box:has(input:checked){ display: block;}
.usage .box h3{ font-size: 3.6rem; font-weight: 600; margin: 1.6rem 0 0.8rem 0; color: var(--content-brand-green);}
.usage .box p { font-size: 1.6rem; margin-bottom: 2.4rem; line-height: 1.8;}
.usage .box p strong{ display: block; font-size:2.2rem; font-weight: 500; margin-bottom: 1.6rem;}
.usage .box h4{ display: flex; font-size:2.2rem; font-weight: 500; color: var(--content-brand-green); align-items: center; padding-bottom: 0.8rem; border-bottom:1px solid #000000; margin-bottom: 0.8rem;}
.usage .box h4:before{ content: ''; display: block; width:0.6rem; height:2.6rem; background-color: var(--content-brand-darkred); margin-right: 0.8rem;}
.usage .flow{ border: 1px solid #000000; padding:2.4rem; text-align: center;}
.usage .flow h3{ font-size:2.4rem; font-weight: 600; margin-bottom: 2.4rem}
.usage .flow ol{ display: flex; justify-content: center; margin-bottom: 2.4rem;}
.usage .flow li{ font-size:2.2rem; display: flex; align-items: center;}
.usage .flow li:after{ content:''; width:2.4rem; height:2.4rem; display: block; clip-path: polygon(0 0,100% 50%,0 100%); background-color: var(--content-brand-orange); margin:0 1.6rem;}
.usage .flow li:last-child::after{ display: none;}
.usage .flow li i{ display: inline-block; padding: 1.6rem 2.4rem; line-height: 1; border-radius: 1.6rem; background-color: #000000; color: #ffffff; font-weight: 600;}
.usage .flow p{ text-align: center;}
.cta.green{ background-color: var(--content-brand-green);}
.reason{ background-color: var(--content-brand-lightgreen); padding:7.2rem 0}
.reason h2{ margin-bottom: 2.4rem;}
.reason .inner{ width:90%; max-width:750px; margin: 0 auto;}
.reason h3{ font-size:2.2rem; font-weight: 600; margin-bottom: 2.4rem; text-align: center;}
.reason h3 strong{ font-size:3.2rem; font-weight: 600; display: block;}
.reason ul{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.reason li{ width:49%; position: relative; align-items: flex-end; margin-bottom: 1.6rem; background-color: #ffffff;}
.reason li img{ opacity: 0.9;}
.reason li .text{ padding:2.4rem 3.2rem; position: absolute; bottom:0; left:0; background-color: rgba(255, 255, 255, 0.75);}
.reason li h4{ font-size:2.8rem; font-weight: 600; margin-bottom: 0.8rem; color: var(--content-brand-green); font-feature-settings: "palt";}
.reason li p{ font-size:1.6rem; font-feature-settings: "palt";}
.reason li p.narrow{ letter-spacing: -0.025rem;}

.contact { padding: 7.2rem 0; background-color: var(--content-brand-beige);}
.contact form{ background-color: #ffffff; border-radius:2.4rem; padding:4.0rem 4.0rem 7.2rem 4.0rem; width:95%; max-width:920px; margin:0 auto 4.8rem auto}
.contact form h2{ font-size:4.0rem; font-weight: 600; margin-bottom: 2.4rem; text-align:center; display: flex; align-items: center; justify-content: center; color: var(--content-brand-blue); padding-bottom:1.6rem; border-bottom: 1px solid var(--content-brand-blue);}
.contact form h2:before{ content:''; width:4.0rem; height:3.0rem; display: block; background-image: url(images/icon_mail_blue.png); background-repeat: no-repeat; background-position: center; background-size: contain; margin-right: 0.8rem; transform: translateY(0.4rem);}
.contact form .item{ margin-bottom: 2.4rem;}
.contact form .item .ttl{ display: flex; font-size:2.4rem; font-weight: 500; margin-bottom: 0.8rem; align-items: center;}
.contact form .item .ttl i{ display: inline-block; font-size:1.6rem; padding: 0 1.6rem; background-color: #ff0000; color: #ffffff; margin-left: 1.6rem; border-radius:2.4rem}
.contact form .item input[type="text"]{font-size:1.8rem; padding:0.8rem; border:1px solid #999999; border-radius:0.8rem; display: block; width:100%}
.contact form .item textarea{font-size:1.8rem; padding:0.8rem; border:1px solid #999999; border-radius: 0.8rem; width:100%}
.contact form .submit{ width:30.0rem; max-width:300px; height:6.4rem; margin:0 auto; background-color: var(--content-brand-darkred); border-radius: 3.2rem; position: relative; display: flex; align-items: center;}
.contact form .submit input{ background-color: transparent; width:100%; height:100%; font-size:2.0rem; font-weight: 600; color: #ffffff;}
.contact form .submit:before{ content:''; height: 3.2rem; width:4.4rem; background-image: url(images/icon_mail.png); background-position: center; background-size: contain; background-repeat: no-repeat; display: block; margin-right: 0.8rem; left: 2.4rem; position: absolute; }
.contact form .submit:after{ content:''; width:2.0rem; height:2.0rem; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; transform: rotate(-45deg); display: block; position: absolute; right:2.4rem}
.contact .tel{ background-color: #ffffff; border:2px solid var(--content-brand-blue); border-radius:1.6rem; margin-top: 7.2rem; overflow: hidden;}
.contact .tel h3{ font-size:3.0rem; font-weight: 800; text-align: center; background-color: var(--content-brand-blue); color: #ffffff; padding:0.8rem}
.contact .tel .wrap{ display: flex; justify-content: center; padding:2.4rem}
.contact .tel .wrap .image{ width:15.0rem;}
.contact .tel .wrap dt{ display: flex; justify-content: center;}
.contact .tel .wrap dt img{ width:24.0rem;}
.contact .tel .wrap dt strong{ font-size:1.8rem; font-weight: 600; color: var(--content-brand-blue); display: block; line-height: 1.2; margin-left: 1.6rem; text-align: ;}
.contact .tel .wrap dt i{ color: var(--content-brand-darkred); font-weight: 600;}
.contact .tel .wrap dd a{ font-size:5.2rem; font-weight: 800; display: flex; align-items: center; margin-bottom: 0.8rem; line-height: 1.4;}
.contact .tel .wrap dd a::before{ content:''; height: 4.2rem; width:5.8rem; background-image: url(images/icon_tel.png); background-position: center; background-size: contain; background-repeat: no-repeat; display: block; transform: translateY(0.4rem);}
.contact .tel .wrap dd small{ display: block; text-align: center; font-size:1.4rem}




/*responsive*/
@media screen and (max-width:1000px){
  html{font-size:0.95vw}
}
@media screen and (max-width:769px){
.mv figure{ aspect-ratio: 1 / 1;}
.mv figure video{ aspect-ratio: 1 / 1;}
.mv figcaption{ left:auto; width:95%; height:100%;}
.mv figcaption .service-title{width:40%; top:2.5rem}
.mv .description img{ margin: -7.2rem 0 -1.2rem 0;}
.mv .description{ padding-bottom:2.4rem}
.mv .description p{ font-size: 3.2rem; margin:2.4rem 0 0 2.4rem; white-space: nowrap;}
.mv .description .inner{ align-items: flex-start;}
.mv figure .badge{ width:40%}
.introduction h2+p strong{ display: block;}
.introduction dt strong{ display: block;}
.std strong{ width:90%; padding:1.6rem!important}
.capability ul{ flex-wrap: wrap;}
.capability li{ width:48%; margin-bottom: 1.2rem;}
.capability li .text{ font-size:1.6rem;}
.usage .switch li{ width:50%}
.usage .flow li i{ padding:1.6rem;writing-mode: vertical-rl; height:10rem}
.usage .box{ padding:4.8rem 0}
.reason li{ width:100%}
.reason li h4{ font-size:2.4rem}
.reason li h4 br{ display: none;}
.reason li .text{ padding:1.6rem 2.4rem }
.reason ul{ width:80%; margin:0 auto}
.contact .tel .wrap dd a{ font-size:4.0rem}
.contact .tel .wrap dt img{ width:20rem}
footer .inner .service-data dl{ display: block;}
footer .inner .service-data dd{ width:100%}
footer .inner .service-data dd li{ width:32%}
footer .inner .service-data dt{ margin: 0 auto 2.4rem auto;}
footer .inner .company-data dl{ flex-wrap: wrap;}
footer .inner .company-data dt{ width:100%}
footer .inner .company-data dt img{ width:50%; margin: 2.4rem auto;}
footer .inner .company-data dd{ width:48%}

}
@media screen and (max-width:769px){
  html{ font-size:2vw;line-height: 1.5;}
  .pc{ display: none!important;}
  .sp{ display: block!important;}

}
@media screen and (max-width:340px){
}


/*ハンバーガーメニューレイアウト*/

.globalMenuSp .wrap{ z-index:99999; overflow-y: scroll; height: 100vh; position: relative; -webkit-overflow-scrolling: touch; display: flex; align-items: center; justify-content: center;}
.globalMenuSp dl{ width:80%;}
.globalMenuSp dt { margin-bottom: 5.0rem;}
.globalMenuSp dt img{ width:50%; margin:0 auto 1.5rem auto;}
.globalMenuSp dd { text-align: left;}
.globalMenuSp dd ul{ width:fit-content; margin:0 auto}
.globalMenuSp dd li{ padding:1.5rem 0}
.globalMenuSp dd a{ font-size:2.8rem; display: flex; align-items: center;}
.globalMenuSp dd a:before{ content: ''; background-color: var(--content-brand-blue); margin-right: 0.5rem; display: block; width:2.0rem; height:2.4rem; clip-path: polygon(0 0,100% 50%,0 100%);}