/*    */
.pc-view{
display:none;
}
.sp-view{
display:block;
}

.fontsize-l{
font-size:150% !important;
}
.fontsize-m{
font-size:120% !important;
}
.fontsize-m2{
font-size:115% !important;
}
.fc-white{
color:#fff !important;
}
.marker{
background-color:#f4ff7e;
}
.sticker{
background-color:#ab987a;
width:120px;
height:125px;
color:#231815;
font-size:16px;
padding:1em .5em;
position:absolute;
top:0;
right:5%;
margin-left:-95px;
z-index:1;
outline: 1px solid #231815;
outline-offset: -8px;
}
#top .container{
padding-top:2em;
}
#top h1{
font-size:2em !important;
text-align:left;
}
header{
min-height:515px;
background:url(../img/header-sp.jpg) center center no-repeat;
background-size:cover;
}

.headercopy-wrapper{
background-color:#f4f1eb;
padding:1rem;
margin-bottom:2rem;
box-shadow: 30px 30px 0 0 #fef586;
}
.headercopy{
display:inline-block;
border-top:1px solid #0f1626;
border-bottom:1px solid #0f1626;
font-size:1em !important;
}

.headerbottom{
/*background-color:#ab987a;*/
padding:1rem 0 .5rem;
}
.headerbottom ul{
list-style:none;
/*margin-top:-5em;*/
padding-left:0;
}

.headerbottom-sp{
background-color:#fef586;
}
.headerbottom-sp ul{
margin-top:-3em;
}
.headerbottom ul li{
width:120px;
height:120px;
background-color:#ff533d;
color:#fff;
border-radius:100%;
padding-top:.5em;
}
.headerbottom ul li p{
font-size:12px;
margin-bottom:.5em;
letter-spacing: -.03em;
}
.headerbottom ul li img{
width:60%;
}
.bg-cta{
background-color:#d1c2a5;
}

.bg-cta.toparea{
background-color:#fef586;
}
.bg-yellow{
background-color:#f9dd64;
padding:1rem;
}
a.ctabtn{
background:#0f1626;
max-width:255px;
width:90%;
height:60px;
line-height: 1em;
border-radius:30px;
display:inline-block;
font-size:1.1em;
font-weight:bold;
color:#fff;
text-decoration:none;
padding-left:2em;
padding-top:1em;
position:relative;
}
a.ctabtn:hover{
color:#fff;
}
a.ctabtn.btn-or{
background-color:#fff;
border:1px solid #ff533d;
color:#ff533d;
padding-top:.5em;
margin-bottom:1.5em;
}
.contactbox-l{
text-align:center;
padding:0;
}
.contactbox-r a.ctabtn.btn-or{
margin-bottom:0;
}
.btn-tel{
vertical-align: middle;
}
.btn-tel::before{
content:'\f095';
font-family: 'Font Awesome 6 Free';
font-weight:900;
font-size:1.5em;
position:absolute;
top:20px;
left:1.2em;
}
.btn-mail::before{
content:'\f0e0';
font-family: 'Font Awesome 6 Free';
font-weight:900;
font-size:1.5em;
position:absolute;
top:20px;
left:.8em;
}
.btn-line::before{
content:'\f3c0';
font-family: 'Font Awesome 6 Brands';
font-weight:400;
font-size:1.5em;
position:absolute;
top:20px;
left:1.6em;
}
.subtext{
font-size:.6em;
line-height:110%;
display:block;
}
.subtitle{
font-size:2em !important;
font-weight:400;
line-height:130%;
margin-bottom:1rem;
}
.abouttitle{
border-left:5px solid #ff533d;
padding-left:1rem;
margin-top:0;
margin-bottom:1rem;
line-height:140%;
font-weight:500;
}
.aboutbox{
margin-top:3em;
}
#works{
background:#799fbb url(../img/photo-works-bg.jpg) top center no-repeat;
background-size:contain;
}
.works-box{
width:100%;
}
.works-txt{
max-width:306px;
padding:1.5em 1em 1em;
background-color:#fff;
margin:0 auto 1em;
z-index:1;
position:relative;
}
.works-txt h3{
height:2.5em;
}
.works-txt p{
font-size:13px;
line-height:1.6em;
}
.history{
max-width:900px;
}

.history{
padding-bottom:25px;
padding-left:55px;
padding-top:25px;
position:relative
}
.history-inner{
position:relative;
}
.history-inner::before{
content:"";
background-color:#ff533d;
width:15px;
height:15px;
border-radius:100%;
position:absolute;
top:14px;
left:-55px;
}
.history-time{
background-color:#ff533d;
width:140px;
height:40px;
text-align:center;
font-size:18px;
font-weight:400;
line-height:40px;
color:#fff;
display:inline-block;
border-radius:25px;
padding:0 1em;
margin-bottom:.6em;
}
.history-title{
color:#ff533d;
display:block;
font-weight:400;
}

#support{
background-color:#e7ebee;
}
.staffimg{
background-color:rgba(0,0,0,0);
width:100%;
overflow:hidden;
text-align:center;
margin:0 auto;
padding:0;
/*  display: inline-block;
  overflow: hidden;
  border-radius: 70% 40% 50% 70% / 60% 50% 70% 40%; */
}
.staffimg img{
margin-left:auto;
margin-right:auto;
}
.staffname{
font-size:16px;
line-height:16px;
color:#ff533d;
}
.staffname span{
font-size:14px;
display:inline-block;
margin-right:1.5em;
}
.staffmessage{
font-size:14px;
line-height:130%;
}
/*********workshop***************/
#workshop .exp-info{
  padding-left: 20px;
  padding-right: 20px;
}
#workshop ul {
  padding-left:0;
}
#workshop ul li{
  list-style: none;
  font-size: clamp(1.05rem, 2.5vw, 1.2rem);
  padding: .5rem 0 .4rem;
  border-bottom: 1px dotted #ffe491;
}
#workshop ul li i{
  color: #ff533d;
  font-size: clamp(1rem, 2.5vw, 1.3rem);
}
.exp-info ul li span{
  display: inline-block;
  color: #ff533d;
  padding: 0 10px 0 10px;
}
.text-ws{ font-size: clamp(1.05rem, 2.5vw, 1.2rem);padding: 0;}
#workshop .alert-warning {
  background-color: #fffcf1;}

  #workshop .swiper-slide img{
    width: 100% !important;
  }
#target{
background:#688696 url(../img/photo-target-bg.jpg) top center no-repeat;
background-size:100% auto;
padding-right:.5em;
padding-left:.5em;
}
.targetbox{
background-color:#fff;
border-radius:100px 0;
}

ul.face{
list-style:none;
color:#ff533d;
margin-left:0;
padding-left:0;
}
ul.face li{
font-size:1.2em;
line-height:1.2em;
margin-bottom:1.2em;
padding-left:1.8em;
position:relative;
}
ul.face li::before{
content:'\f599';
font-family: 'Font Awesome 6 Free';
font-weight:400;
font-size:1.5em;
position:absolute;
top:0;
left:0;
}
ul.check{
list-style:none;
color:#ff533d;
}
ul.check li{
font-size:1.2em;
line-height:1.2em;
margin-bottom:1.5em;
padding-left:2.2em;
position:relative;
}
ul.check li::before{
content:'\f4fc';
font-family: 'Font Awesome 6 Free';
font-weight:900;
font-size:1.5em;
position:absolute;
top:0;
left:0;
}
ul.check2{
max-width:600px;
list-style:none;
background-color:#e7ebee;
padding:1em;
margin:0 auto;
border-radius:10px;
}
ul.check2 li{
font-size:.8em;
line-height:1em;
margin-bottom:1em;
padding-left:.8em;
position:relative;
}
ul.check2 li::before{
content:'\21';
font-family: 'Font Awesome 6 Free';
font-weight:900;
font-size:1.2em;
position:absolute;
top:0;
left:0;
}
ul.check2 li:last-child{
margin-bottom:0;
}
.step-inner{
max-width:340px;
margin-bottom:5em;
position:relative;
}
.step-inner.arrow:before{
content:"";
width: 40px;
height: 40px;
border-top: solid 2px #ff533d;
border-right: solid 2px #ff533d;
position: absolute;
left: 50%;
bottom: -10%;
transform: rotate(135deg);
margin-left:-20px;
}
.step-no{
background-color:#ff533d;
width:60px;
height:60px;
border-radius:100%;
color:#fff;
text-align:center;
line-height:120%;
padding-top:.4em;
margin:0 auto .8em;
}
.img-shadow{
filter: drop-shadow(0px 0px 7px rgba(0,0,0,0.3));
}
#first,#faq{
background:#688696 url(../img/photo-faq-bg.png) top center no-repeat;
background-size:cover;
}
/*foot btn*/
.flow-navi__wrapper {
  display:none;
}
.flow-navi {
    bottom: 0;
    left: 0;
    width: 100%;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    position: fixed;
    z-index: 3;
}
.flow-navi ul{
display:flex;
width:100%;
padding:0;
margin-bottom:0;
border-top:1px solid #eee;
}
.flow-navi ul li{
display:block;
width:50%;
}
.ctabtn-foot-mail,.ctabtn-foot-line{
position:relative;
display:block;
background-color:#ff533d;
color:#fff;
text-decoration:none;
padding:1em .5em;
font-size:14px;
text-align:center;
}
.ctabtn-foot-line{
background-color:#0f1626;
}
.flow-navi i{
font-size:2em;
vertical-align:middle;
display:inline-block;
margin-right:5px;
}
/* accordion */
.accordion-001 {
    max-width: 700px;
    background-color: rgba(255,255,255,.5);
    margin:0 auto;
}

.accordion-001:not([open]) {
    margin-bottom: 7px;
}

.accordion-001 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em 1em 3em;
    border-radius: 5px;
    background-color: #fff;
    font-size:1.2em;
    font-weight: 400;
    cursor: pointer;
    border:1px solid #0f1626;
}

.accordion-001 summary::-webkit-details-marker {
    display: none;
}

.accordion-001 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #0f1626;
    border-right: 3px solid #0f1626;
    content: '';
    transition: transform .3s;
}

.accordion-001[open] summary::after {
    transform: rotate(225deg);
}
.accordion-001 summary::before{
content:"Q";
position:absolute;
top:5px;
left:20px;
font-size:1.8em;
color:#ff533d;
}
.accordion-001 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 1em 2em 2em 3.5em;
    transition: transform .5s, opacity .5s;
    position:relative;
}

.accordion-001 p::before {
content:"A";
position:absolute;
top:5px;
left:25px;
font-size:2.2em;
}

.accordion-001[open] p {
    transform: none;
    opacity: 1;
}
/* //accordion */
.accesspoint{
background-color:#ff533d;
display:inline-block;
padding:.2em .5em;
color:#fff;
margin-bottom:0;
border-radius:3px;
}
.bg-or{
background-color:#ff533d;
}
iframe {
  width: 100%;
  aspect-ratio: 4/3;
}
@media screen and (max-width:767px){
.history{padding-left:35px}
}
.history:before{
background-color:#ff533d;
content:"";
height:100%;
left:7.5px;
position:absolute;
top:0;
width:1px
}
@media screen and (max-width:767px){
.history:before{left:15px}
.history-inner::before{
left:-28px;
}
}

/*  media  */
@media screen and (max-width: 767px) {

}

@media (min-width: 576px) {

}
/* tablet */
@media (min-width: 768px) {
 .flow-navi__wrapper {
   position: static;
 }
 .flow-navi {
   display:none;
 }

.fontsize-l{
font-size:200% !important;
}
.fontsize-m{
font-size:150% !important;
}
.sticker{
background-color:#ab987a;
width:190px;
height:165px;
color:#231815;
font-size:20px;
padding:1em .5em;
position:absolute;
top:0;
left:50%;
margin-left:-95px;
z-index:1;
outline: 1px solid #231815;
outline-offset: -8px;
}
header{
min-height:798px;
background:url(../img/headerbg_pc.webp) center right 40% no-repeat;
background-size:cover;
}
#top h1{
font-size:3em !important;
text-align:left;
}
.headercopy{
font-size:1.6em !important;
}
.headerbottom{
/*background-color:#ab987a;*/
}
.headerbottom ul{
list-style:none;
/*margin-top:-6em;*/
}
.headerbottom ul li{
width:200px;
height:200px;
background-color:#ff533d;
color:#fff;
border-radius:100%;
padding-top:1em;
}

.headerbottom ul li p{
font-size:1em;
margin-bottom:.5em;
letter-spacing: -.03em;
}
.headerbottom ul li img{
width:auto;
}
#top .container{
padding-top:8em;
}
.bg-cta .container{
max-width:100%;
}

.subtitle{
font-size:2.5em !important;
}
.aboutbox{
margin-top:6em;
}
.contactbox-l,.contactbox-r{
flex:0 0 auto;
}
.contactbox-l{
max-width:480px;
padding:0;
}
.contactbox-r{
max-width:480px;
padding:2em 1em;
}

.works-box{
width:50%;
display:block;
}
.step-inner{
margin-bottom:4em;
}
.step-inner.arrow:before{
display:none;
}

#first,#faq{
background:#688696 url(../img/photo-faq-bg.png) top center no-repeat fixed;
background-size:cover;
}
 }
/* PC */
@media (min-width: 960px) {
.pc-view{
display:block;
}
.sp-view{
display:none;
}
header{
}

.headercopy-wrapper{
text-align:center;
}
.headerbottom ul{
list-style:none;
/*margin-top:-6em;*/
}
.headerbottom ul li{
width:190px;
height:190px;
background-color:#ff533d;
color:#fff;
border-radius:100%;
padding-top:2em;
}
.bg-cta .container{
max-width:1000px;
}
.abouttitle{
border-left:5px solid #ff533d;
padding-left:1rem;
margin-top:1rem;
margin-bottom:1rem;
line-height:140%;
font-weight:500;
}
.works-box{
width:30%;
display:block;
}
.works-txt{
width:90%;
padding:2.5em 1em 1em;
background-color:#fff;
margin:-3em auto 1em;
z-index:1;
position:relative;
}
.staffimg{
width:150px;
overflow:hidden;
text-align:center;
margin:0;
background-color:#ff533d;
/*border-radius: 0;*/
--bs-gutter-x:0;
}
.staffimg img{
max-width:none;
width:100%;
height:100%;
object-fit:cover;
object-position:50% 50%;
}
.step-inner{
margin-bottom:0;
}
.contactbox-r{
width:40%;
}

iframe {
  width: 100%;
  aspect-ratio: 16/9;
}
}

@media (min-width: 1640px) {
.works-box{
width:16.666%;
display:block;
}
.works-txt{
width:90%;
padding:2.5em 1em 1em;
background-color:#fff;
margin:-3em auto 1em;
z-index:1;
position:relative;
}
}