@charset "UTF-8";

/* -----------------------------------------------------------------------------
  - Layout
-------------------------------------------------------------------------------- */
.l-header{
  position: fixed;
  width:100%;
  height: auto;
  z-index: 100;
  background-color: #fff;
}

.l-header__nav{
  position: relative;
  /* overflow: hidden; */
  z-index: 1000;
}

.l-pc__nav{
  display: none;
}

.l-main__hero{
  padding-top: 68px;
  position: relative;
  margin: 0 5%;
  /* top:48px; */
  /* padding-top: 40%; */
  /* padding-bottom: 100px; */
  /* background-image: url(../img/top/main-hero.jpg); */
}

.l-main{
  margin-bottom: 40px;
}

.l-blog{
  position: relative;
  overflow: hidden;
  margin-top: 40px;
}

.l-footer{
  padding: 2em;
  background-color: #151515;
  color: #fff;
  text-align: center;
  font-size: 0.75em;
}

@media (min-width:700px) {
  .l-header__nav{
    overflow: initial;
  }

  .l-pc__nav{
    z-index: 10;
  }

  .l-main__hero{
    padding-top:80px;
  }

  .l-blog{
    overflow: hidden;
    margin: 80px 0;
  }
}

.l-sub__hero{
  margin-bottom: 40px;
  padding-top: 50px;
}

.l-about{
  margin-bottom: 40px;
}

.l-prof{
  overflow: hidden;
  padding: 40px 0;
  text-align: left;
}

.l-process__area{
  overflow: hidden;
  margin-bottom: 40px;
}

.l-button__area{
  text-align: center;
  padding-top:40px;
}

.l-button__area > .c-left__box{
  padding-bottom: 16px;
}

@media (min-width:700px) {
  .l-sub__hero{
    margin-bottom: 80px;
    padding-top: 80px;
  }

  .l-about{
    overflow: hidden;
    margin-bottom: 80px;
  }

  .l-prof{
    padding: 80px 0;
  }

  .l-process__area{
    margin-bottom: 80px;
  }

  .l-button__area{
    padding-top: 80px;
  }
}
/* -----------------------------------------------------------------------------
  - Component
-------------------------------------------------------------------------------- */
.c-wrap{
  width:90%;
  max-width: 470px;
  margin:0 auto;
  overflow: hidden;
}

.c-sp{
  display: block;
}

.c-pc{
  display: none;
}

.c-gray__bg{
  background-color: #F5F5F5;
}

.c-gray__wrap{
  padding:40px 0;
}

.c-header__logo{
  /* float: left; */
  position: relative;
  display: inline-block;
  margin: 8px;
  width:70px;
  height: auto;
  z-index: 1000;
}

.c-button__icon{
  display: inline-block;
  text-align: center;
  width: 48px;
  height: 48px;
}

.c-button__primary{
  position: relative;
  display: inline-block;
  width: 100%;
  border: 1px solid #000;
  color: #000;
  line-height: 50px;
  text-align: center;
  z-index: 10;
}

.c-button__primary::before, .c-button__primary::after{
  position: absolute;
  right: 16px;
  top:20px;
  content: "";
  display: inline-block;
  width:30px;
  height: 10px;
}

.c-button__primary::before{
  top:34px;
  right:14px;
  transform: rotate(-50deg);
  border-right: 1px solid #000;
}

.c-button__primary::after{
  border-bottom: 1px solid #000;
}

.c-content__box{
  position: relative;
  margin: 40px 0;
}

.c-content__box > .c-wrap{
  margin-bottom: 24px;
}

.c-content__category{
  position: absolute;
  display: block;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-transform: uppercase;
  -ms-text-transform: uppercase;
  -webkit-text-transform: uppercase;
  text-orientation: upright;
  font-size: 0.875em;
}

.c-text__box{
  padding-top: 75px;
}

.c-content__title{
  display: inline-block;
  margin: 32px 0;
  text-align: left;
  font-size: 28px;
  font-weight: normal;
  line-height: 1.5;
  text-shadow: 0 0 6px #fff;
  z-index: 2;
}

.c-img__box{
  width: 64%;
  z-index: 1;
}

.c-blog__container{
  overflow: hidden;
}

.c-blog__box{
  width: 85%;
  margin-top: 16px;
  margin-left: auto;
  text-align: right;
}

.c-main__title{
  font-size: 24px;
  text-align: center;
  margin-bottom: 32px;
}

.c-small__title{
  display: block;
  font-size: 12px;
  padding-top: 4px;
}

.c-sub__title{
  font-size: 20px;
  margin-bottom: 16px;
}

.c-text{
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
}

.c-text__hero{
  margin-bottom: 40px;
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
}

@media (min-width:700px) {
  .c-wrap{
    width:90%;
    max-width: 1024px;
    margin:0 auto;
  }

  .c-sp{
    display: none;
  }

  .c-pc{
    display: block;
  }

  .c-gray__wrap{
    padding:80px 0;
  }

  .c-header__logo{
    margin: 16px;
    width:100px;
  }

  .c-header__logo:hover{
    opacity: 0.7;
  }

  .c-button__icon{
    width: 80px;
    height: 80px;
  }

  .c-button__primary{
    display: inline-block;
    width: 80%;
    min-width: 300px;
    max-width: 400px;
    margin: 0 auto;
  }

  .c-button__primary::before, .c-button__primary::after{
    position: absolute;
    right: 10px;
    top:16px;
    content: "";
    display: inline-block;
    width:40px;
    height: 12px;
    transition: .5s
  }

  .c-button__primary::before{
    top:34px;
    right:8px;
    transform: rotate(-50deg);
    border-right: 1px solid #000;
  }

  .c-button__primary::after{
    border-bottom: 1px solid #000;
  }

  .c-button__primary:hover::before, .c-button__primary:hover::after{
    right:-25px;
  }

  .c-button__primary:hover::before{
    right:-30px;
  }

  .c-content__box{
    overflow: hidden;
    margin: 80px 0;
  }

  .c-text__hero + .c-content__box{
    margin-top: 0;
  }

  .c-content__box > .c-wrap{
    margin-bottom: 40px;
  }

  .c-content__category{
    font-size: 1.125em;
  }

  .c-text__box{
    width:50%;
    padding-top: 50px;
    text-align: center;
  }

  .c-content__title{
    font-size: 2.875em;
  }

  .c-img__box{
    width: 50%;
    z-index: 1;
  }

  .c-blog__box{
    float: left;
    width: 28%;
    margin-top: 56px;
    margin-bottom: 40px;
    margin-left: 5.33333333%;
    text-align: left;
  }

  .c-main__title{
    font-size: 28px;
    margin-bottom: 40px;
  }

  .c-small__title{
    font-size: 14px;
    padding-top: 8px;
  }

  .c-sub__title{
    font-size: 22px;
    margin-bottom: 16px;
  }

  .c-text{
    margin-bottom: 16px;
    font-size: 16px;
  }

  .c-text__hero{
    margin-bottom: 80px;
    font-size: 18px;
  }

  .c-left__box{
    width: 48%;
    float: left;
  }

  .c-right__box{
    width: 48%;
    float: right;
  }
}

.c-process__wrap{
  position: relative;
  padding: 40px 0;
}

.c-process__wrap.-bg__gray{
  background-color: #f5f5f5;
}

.c-num__title{
  font-size: 40px;
  margin-bottom: 16px;
}

.c-squ__title{
  margin-bottom: 8px;
  font-size: 22px;
  line-height: 1.25;
}

.c-squ__title::before{
  content: "▪︎";
}

.c-squ__subtitle{
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 1.25;
}

.c-squ__subtitle::before{
  content: "▫︎";
}

.c-border{
  padding-bottom: 40px;
}

.c-border::after{
  content: "";
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  height: 1px;
  border-bottom: 1px 	dashed #ccc;
}

@media (min-width:700px) {
  .c-process__wrap{
    position: relative;
    height: 328px;
  }

  .c-process__wrap img{
    width: auto;
    height: 328px;
  }

  .c-process__left{
    position: absolute;
    left:0;
    top:50%;
    transform: translateY(-50%);
    width: 50%;
  }

  .c-process__right{
    position: absolute;
    right: 0;
    top:50%;
    transform: translateY(-50%);
    width: 50%;
  }

  .c-squ__title{
    font-size: 26px;
    margin-bottom: 16px;
  }

  .c-squ__subtitle{
    font-size: 22px;
    margin-bottom: 16px;
  }

  .c-border{
    padding-bottom: 80px;
  }
}

/* -----------------------------------------------------------------------------
  - Object
-------------------------------------------------------------------------------- */
.p-header__menu{
  float: right;
}

.p-nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
/* height: 100%; */
}

.p-nav__inner{
  position: fixed;
  top:-100%;
  width: 100%;
  padding: 80px 24px 40px;
  background-color: rgba(255,255,255,0.9);
  z-index: 1000;
  transition:  all .5s;
}

.p-nav__inner.show{
  top:0;
  z-index: 1000;
}

.p-nav__list{
  position: relative;
  padding: 1em 0;
  display:block;
}

.p-nav__list .c-pc{
  display: none;
}

.p-pc_nav{
  display: none;
}

.p-button__insta{
  position: relative;
  float: left;
  display: inline-block;
  background-color: #CBCBCB;
  z-index: 100;
}

.p-button__line{
  position: relative;
  float: left;
  display: inline-block;
  background-color: #dadada;
  z-index: 100;
}

.p-button__insta img,
.p-button__line img{
  padding: 8px;
}

.p-button__menu{
  position: relative;
  float: left;
  background-color: #E2DFDF;
  font-size: 0.75em;
  z-index: 100;
}

.p-align__center{
  text-align: center;
}

.p-align__right{
  text-align: right;
}

/* .p-text__copy{
  position: absolute;
  bottom: 0;
  right: 0;
 width: 100%;
 -ms-writing-mode: tb-rl;
 writing-mode: vertical-rl;
 font-size: 0.875em;
 line-height: 1.3;
 letter-spacing: 3px;
 text-shadow: 0 0 6px #fff;
}

.p-text__copy p:first-child{
  padding-left: 16px;
} */

.p-copy__hero{
  margin: 24px 0;
}

.p-copy__title{
  margin-bottom: 16px;
  font-size: 20px;
}

.p-copy__text{
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: 1px;
}

.p-title__left{
  position: relative;
  left: 10%;
}

.p-title__right{
  position: relative;
  right: -50%;
}

.p-category__left{
  left:0;
}

.p-category__left::after{
  content: "";
  position: absolute;
  top:10px;
  left:30px;
  display: block;
  border-top: 1px solid #000;
  width: 100px;
  height: 1px;
  z-index: 2;
}

.p-category__right{
  right:0;
}

.p-category__right::after{
  content: "";
  position: absolute;
  top:10px;
  right:30px;
  display: block;
  border-top: 1px solid #000;
  width: 100px;
  height: 1px;
  z-index: 2;
}

.p-img__right{
  position: absolute;
  top:0;
  right:0;
  z-index: 1;
}

.p-img__left{
  position: absolute;
  top:0;
  left:0;
  z-index: 1;
}

.p-blog__info{
  text-align: left;
  margin-top: 8px;
}

.p-blog__date{
  font-size: 0.625em;
}

.p-blog__title{
  margin-top: 4px;
  font-size: 0.875em;
}

.p-effect{
  transform: translateY(100px);
  opacity: 0;
  transition: 1s ease;
}

.p-effect.is-active{
  transform: translateY(0);
  opacity: 1;
}

@media screen and (min-width:845px){
  .p-nav{
  display: block;
  position: static;
  float: left;
  width: auto;
  height: auto;
  background-color: transparent;
  }

  .p-nav__inner{
    display: block;
    position: relative;
    padding-top: 0;
    padding-left: 0;
  }

  .p-nav__list{
    position: static;
    display:block;
    float: left;
    width: 96px;
    margin: 0 5px;
    text-align: center;
  }

  .p-nav__list .c-pc{
    display: block;
  }

  .p-pc_nav{
    display: block;
  }

  .p-nav__list a{
    display: block;
    width: 100%;
    line-height: 1.5;
  }

  .p-nav__list a:hover{
    opacity: 0.5;
  }

  .p-button__menu{
    display: none;
    float: left;
    background-color: #E2DFDF;
    font-size: 0.75em;
    position: relative;
    z-index: 100;
  }
}

@media (min-width:700px) {
  .p-header__menu{
    overflow: hidden;
    float: right;
  }

  .p-button__insta{
    /* float: right; */
    display: inline-block;
    background-color: #CBCBCB;
    z-index: 100;
  }

  .p-button__line{
    /* float: right; */
    display: inline-block;
    background-color: #dadada;
    z-index: 100;
  }

  .p-button__insta:hover,
  .p-button__line:hover{
    opacity: 0.7;
  }

  .p-button__insta img,
  .p-button__line img{
    padding: 16px;
  }

  /* .p-text__copy{
    float: right;
    width: auto;
   font-size: 1em;
   letter-spacing: 4px;
  } */

  .p-copy__hero{
    margin: 40px auto 0;
    writing-mode: vertical-rl;
  }

  .p-copy__title{
    margin-bottom: 0;
    margin-left: 40px;
    font-size: 24px;
  }

  .p-copy__text{
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 1.5px;
  }

  .p-title__left{
    position: relative;
    left: 10%;
  }

  .p-title__right{
    position: relative;
    right: -50%;
  }

  .p-title__left{
    position: static;
  }

  .p-title__right{
    position: static;
  }

  .p-category__left::after{
    width: 150px;
  }

  .p-category__right{
    right:0;
  }

  .p-category__right::after{
    width: 150px;
  }

  .p-text__left{
    float: left;
  }

  .p-text__right{
    float: right;
  }

  .p-img__right{
    position: static;
    float: right;
    z-index: 1;
  }

  .p-img__left{
    position: static;
    float: left;
    z-index: 1;
  }

  .p-blog__info{
    display: inline-block;
  }

  .p-blog__date{
    font-size: 0.875em;
  }

  .p-blog__title{
    margin-top: 8px;
    font-size: 1em;
  }
}

.p-type{
  font-size: 14px;
  margin-bottom: 24px;
}

.p-type .-name{
  display: block;
  padding-top:4px;
  font-size: 18px;
}

.p-qualification{
  /* padding: 1rem 1.5rem; */
  padding-top: 1rem;
  border-top: 1px dotted #333;
  /* border: 1px solid #333; */
}

.p-qualification .-title{
  margin-bottom: .5rem;
}

.p-border__top::before{
  content: "";
  position: absolute;
  top:0;
  right: 45%;
  border-right: 1px dashed #ccc;
  border-bottom: 1px dashed #ccc;
  width: 100px;
  height: 60px;
}


.p-border__bottom::after{
  content: "";
  position: absolute;
  bottom: 0;
  right: 45%;
  border-right: 1px dashed #ccc;
  width: 1px;
  height: 40px;
}

.p-sub__copy{
  margin-top: 40px;
  text-align: center;
  line-height: 1.5;
}

.p-price{
  display: inline-block;
  margin-top: 8px;
  margin-bottom: 8px;
  padding-right: 16px;
  font-size: 18px;
  border-bottom: 1px solid #000;
}

.p-price .-yen{
  font-size: 24px;
}

.p-attention{
  font-size: 14px;
  line-height: 1.8;
}

.p-detail__box{
  margin-top: 16px;
  padding: 16px;
  background-color: #f5f5f5;
}

.p-middle__title{
  margin-bottom: 8px;
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
}

.p-detail__text{
  font-size: 14px;
  line-height: 1.5;
}

.p-table__wrap table{
  width: 100%;
  margin: 0 auto 16px;
  border: 1px solid #000;
}

.p-table__wrap table th ,.p-table__wrap table td{
  border: 1px solid #000;
  padding: 16px 8px;
  text-align: left;
}

.p-table__wrap table td{
  background-color: #fff;
}

.p-time{
  padding-top: 8px;
  font-size: 14px;
}

.p-before , .p-after{
  position: relative;
}

.p-before::before , .p-after::before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  padding: 8px 24px;
  background-color: #f5f5f5;
  letter-spacing: 1px;
}

.p-before::before{
  content: "before";
}

.p-after::before{
  content: "after";
}

.p-acd__box{
  position: relative;
}

.p-acd__btn {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 150px;
  border: 1px solid #333;
  padding: 8px;
  text-align: center;
  z-index: 10;
}
.p-acd__btn::before {
  content: "続きを読む"
}
.p-acd__text {
  position: relative;
  overflow: hidden;
  height: 200px; /*隠した状態の高さ*/
  padding-bottom: 40px;
  transition: .5s;
}
.p-acd__text::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(245,245,245,0) 0%, rgba(245,245,245,0.9) 50%, rgba(245,245,245,0.9) 50%, #f5f5f5 100%);
  background: linear-gradient(top, rgba(245,245,245,0) 0%, rgba(245,245,245,0.9) 50%, rgba(245,245,245,0.9) 50%, #f5f5f5 100%);
  content: "";
}
.p-acd__check {
  display: none; /*チェックボックスは常に非表示*/
}
.p-acd__check:checked ~ .p-acd__btn::before {
  content: "閉じる" /*チェックされていたら、文言を変更する*/
}
.p-acd__check:checked ~ .p-acd__text {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.p-acd__check:checked ~ .p-acd__text::before {
  display: none; /*チェックされていたら、p-acd__textのbeforeを非表示にする*/
}

@media (min-width:700px) {
  .p-type{
    font-size: 16px;
    margin-bottom: 24px;
  }

  .p-type .-name{
    display: block;
    padding-top:8px;
    font-size: 20px;
  }

  .p-border__bottom::after ,.p-border__top::before{
    content: none;
  }

  .p-border__right::before{
    content: "";
    position: absolute;
    top:-110px;
    right: 50%;
    border-right: 1px dashed #ccc;
    border-bottom: 1px dashed #ccc;
    width: 500px;
    height: 60px;
  }

  .p-border__left::before{
    content: "";
    position: absolute;
    top:-110px;
    left: 30%;
    border-left: 1px dashed #ccc;
    border-bottom: 1px dashed #ccc;
    width: 500px;
    height: 60px;
  }

  .p-sub__copy{
    margin-top: 80px;
  }

  .p-price{
    margin-top: 32px;
    margin-bottom: 16px;
    font-size: 28px;
  }

  .p-price .-yen{
    font-size: 40px;
  }

  .p-attention{
    font-size: 16px;
  }

  .p-detail__box{
    padding: 24px;
  }

  .p-middle__title{
    margin-bottom: 16px;
    font-size: 18px;
  }

  .p-detail__text{
    font-size: 16px;
  }

  .p-table__wrap{
    width: 630px;
    margin: 0 auto;
  }

  .p-table__wrap table{
    width: 90%;
    margin-bottom: 24px;
  }

  .p-table__wrap table th ,.p-table__wrap table td{
    padding: 16px;
  }

  .p-time{
    font-size: 16px;
  }

  .p-before::before , .p-after::before{
    font-size: 18px;
  }

}