/* Typography */
body{
color:#0f1626;
}
body, ul, li, p, a, label, input, div {
  font-family: 'Roboto', "Noto Sans JP", 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif;
  font-size: 18px;
  font-weight: 300;
}
section, section.cta{
  padding: 2.5rem 0;
}

  section.cta.toparea{
    padding: 0;
  }
/*.container{
  max-width: 1140px;
}*/
.cont_narow{
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
h1, h2, h3, .h1,.h2,.h3{
  letter-spacing: -.02em;
  font-family: 'Noto Serif JP',"Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}
h1 {
  font-size: 24px !important;
  font-weight: 700 !important;
  text-align: center;
}
h2 {
  font-size: 20px !important;
  font-weight: 700;
  position: relative;
  line-height: 1.4;
}
h2.section-title{
  margin-bottom: 10px;
  padding-bottom: 30px;
}
h2.section-title::after{
  content: '';
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: #F4970F;
  bottom: 10px;
  left: calc(50% - 25px);
}
.h2{
    font-family: 'Noto Serif JP',"Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  font-size: 20px !important;
  font-weight: 600 !important;
  position: relative;
  text-align: center;
}
h3 {
    font-family: 'Noto Serif JP',"Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  font-size: 20px !important;
  font-weight: 600;
}
.sansserif{
font-family: 'Roboto',  "Noto Sans JP", 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif !important;
}
.serif{
font-family: 'Noto Serif JP',"Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif !important;
}
/* General */
.logo { font-weight: 500 !important;}
.text-success { color: #59ab6e !important;}
.text-light { color: #cfdde1 !important;}
.bg-dark { background-color: #212934 !important;}
.bg-black { background-color: #1d242d !important;}
.bg-blue { background-color: #6293a6;}

.shadow {
  box-shadow: 0 .2rem .3rem rgba(0,0,0,.1)!important;
}
img{ image-rendering: -webkit-optimize-contrast;}
/*  button  */

.logo.h1 {
  margin:0.2rem auto 0.3rem}

.logo img{
  width: 120px;
}

img{
  max-width: 100%;
}

/***************     cta    ********************/
.cta p.h2{
  font-size: 18px !important;
  letter-spacing: -.2px;
}
.cta p.text-bold{
  font-size: 15px !important;
  letter-spacing: -.2px;
}

/******************* swiper ************************/
.swiper-container {
  padding-bottom: 40px;
}

.swiper-container-horizontal>.swiper-pagination-bullets {
  bottom: 0;
}

.swiper-pagination-bullet-active {
  background: #F15A24;
}

.swiper-button-next,
.swiper-button-prev {
  outline: none;
  color: #F15A24;
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  right: -20px;
  left: auto;
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  left: -20px;
  right: auto;
}

.swiper-button-next:hover,
.swiper-button-next:active,
.swiper-button-next:focus,
.swiper-button-prev:hover,
.swiper-button-prev:active,
.swiper-button-prev:focus {
  outline: none;
}

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

  .swiper-button-next,
  .swiper-container-rtl .swiper-button-prev {
      right: 0;
      top:150px;
  }

  .swiper-button-prev,
  .swiper-container-rtl .swiper-button-next {
      left: 0;
      top:150px;
  }

  .swiper-button-next:after,
  .swiper-button-prev:after {
      font-size: 2rem;
  }
}

/******************* swiper ************************/

/*footer*/
footer{
 font-size: .8em;
}
@media (min-width: 768px) {
  section{
    padding: 4rem 0;
  }
  section.headerbottom , section.cta{
    padding: 2rem 0;
  }
  section.cta.toparea{
    padding: 0;
  }
  h1 {
    font-size: 62px !important;
    text-align: left;
  }
  h2 {
    font-size: 30px !important;
  }
  .h2{
    font-size: 30px !important;
  }
  h3 {
    font-size: 24px !important;
  }
  h2.section-title{
    margin-bottom: 10px;
    padding-bottom: 40px;
  }
  .logo img{
    width:100%;
  }
  .cta p.h2 {
    font-size: 30px !important;
    letter-spacing: -.2px;
  }
 }

/*  style2ここから  */
.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;
}
.fc-or{
color:#ff533d;
}
.marker{
background-color:#f4ff7e;
}
.sticker{
background-color:#ab987a;
width:120px;
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-sp2.jpg) center center no-repeat;
background-size:cover;
}

.headercopy-wrapper{
background-color:#f4f1eb;
padding:1rem;
margin:1rem 0 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{
padding:1rem 0 .5rem;
}
.headerbottom ul{
list-style:none;
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%;
}
.headerbottom ul li p{
font-size:11px;
margin-bottom:0;
letter-spacing: -.03em;
}
.headerbottom ul li img{
width:50%;
}
.bg-cta{
background-color:#d1c2a5;
}

.bg-cta.toparea{
background-color:#fef586;
}
.bg-yellow{
background-color:#f9dd64;
padding:1rem;
}
a.ctabtn{
background:#2dcb3b;
max-width:255px;
width:90%;
height:60px;
line-height: 1em;
border-radius:30px;
display:block;
font-size:.9em;
line-height:1.3em;
font-weight:bold;
color:#fff;
text-decoration:none;
padding-left:4.5em;
padding-top:.5em;
position:relative;
text-align:left;
margin:0 auto;
}
a.ctabtn.btn-mail{
background:#ffa13d;
padding-left:3.3em;
}
a.ctabtn:hover{
color:#fff;
}
a.ctabtn.btn-or{
background-color:#fff;
border:1px solid #ff533d;
color:#ff533d;
font-size:1.3em;
line-height:1em;
padding-left:2.5em;
padding-top:.5em;
margin-bottom:0;
}
.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.2em;
position:absolute;
top:18px;
left:.8em;
}
.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:.45em;
line-height:1em;
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;
font-size:1.2rem !important;
}
.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);
height:35vh;
overflow:hidden;
text-align:center;
margin:0 auto;
padding:0;
}
.staffimg img{
object-position:50% 50%;
object-fit:cover;
width:100%;
height:100%;
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%;
}

#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:#2dcb3b;
}
.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;
}
}
/* 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;
color:#231815;
font-size:20px;
padding:1.5em .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/header-sp2.jpg) center right 40% no-repeat;
background-size:cover;
}
#top h1{
font-size:3em !important;
text-align:left;
}
.headercopy{
font-size:1.6em !important;
}
.headerbottom ul{
list-style:none;
}
.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:0;
letter-spacing: -.03em;
}
.headerbottom ul li img{
width:auto;
max-width:75px;
}
#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;
}

.staffimg{
height:auto;
}
.staffimg img{
object-fit:cover;
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
}
#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{
min-height:798px;
background:url(../img/headerbg_pc_04.webp) center right 40% no-repeat;
background-size:cover;
}

.headercopy-wrapper{
text-align:center;
}
.headerbottom ul{
list-style:none;
}
.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:25%;
display:block;
}
.works-txt{
width:90%;
padding:2.5em 1em 1em;
background-color:#fff;
margin:-3em auto 1em;
z-index:1;
position:relative;
}
.works-txt h3.works-title{
font-size:1.8em;
}
.staffimg{
width:150px;
height:auto;
overflow:hidden;
text-align:center;
margin:0;
background-color:#ff533d;
--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;
}
}