@charset "UTF-8";
/* CSS Document */
body{
	margin: 0px !important;
	overscroll-behavior: none;
}
h1,h2,h3,h4,h5,h6{margin: 0;}
ul {
    display: block;
    list-stslideyle-type: disc;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
}
*{
    min-height: 0;
    min-width : 0;
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	scroll-behavior: smooth;
}
#bl{
    padding: 0;
	margin: 0 auto;
    font-family: YuMincho,
	"Hiragino Mincho ProN",
	serif;
	font-style: normal;
	font-weight: 400;
    line-height: 2.0;
    font-size: 11px;
    letter-spacing: 1px;
	width: 100%;
    box-sizing: border-box;
    color: #111;
	background: #fff;
    -webkit-text-size-adjust: 100%;
}
#bl a {
	text-decoration: none;
	color: #2b2b2b;
}
#bl p {
    margin: 0;
}
#bl　a:hover {
	opacity: 1;
}
#bl .clear{
	clear: both;
}
#bl img{
    width: 100%;
    line-height: 0;
}
#bl ul,#bl li {
	list-style: none;
	padding: 0;
	margin: 0;
}
#bl .f-en {
	font-family: "Georgia", serif;
	font-optical-sizing: auto;
	font-style: normal;
}

#main_visual .main_box{
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: row;
    flex-wrap: wrap;
	line-height: 0;
}

/*#main_visual .main_box div{
	width: 33.3%;
	justify-content: center;
}*/
#main_visual .ttl_box{
	background-color: #b0c9df;
    padding: 4% 0 1%;
}
#main_visual .ttl_box .ttl{
	width: 57%;
    margin: 5% auto;
}
#bl .catch_area{
	margin: 5% auto;
}
#bl .catch_area .catch {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
  font-weight: 600;
}
#bl .catch_area .catch:before{
  border-top: 1px solid;
  content: "";
  width: 1.5em; /* 線の長さ */
}
#bl .catch_area .catch:before {
  margin-right: 1em; /* 文字の右隣 */
  margin-top: -30px;
  margin-left: 5px;
}
#bl .read{
	width: 90%;
	margin: 5% auto;
}

#bl .staff_box{
	position: relative;
	display: flex;
	width: 100%;
	flex-direction: row;
    flex-wrap: wrap;
	justify-content: space-evenly;
    align-items: center;
	margin: 20% auto 15%;
	row-gap: 15px;
	column-gap: 10px;
	font-family: yu-gothic-pr6n, sans-serif;	
}
#bl .staff_box .staff{
	width: 25%;
}
#bl .staff_box .staff img{
	border-radius: 50%;	
}
#bl .staff_box .name{
	font-weight: 600;
	text-align: center;
	font-size: 12px;
	line-height: 1.5;
}
#bl .staff_box .name span{
	font-size: 10px;
}
#bl .line{
	border-bottom: 1px solid #000;
	margin-bottom: 50px;
}
#bl .make{
	position: relative;
}
#bl .fukidashi {
    width: 29%;
    position: absolute;
    top: -12%;
    right: 2%;
}
@media only screen and (min-width: 768px) {
	#bl{
    font-size: 12px;
	}
   #bl .main_visual .ttl {
     width: 32%;
	}
	#bl .read p {
    width: 650px;
    margin: 5% auto;
	}
	#bl .read{
	margin-bottom: 0;
	width: 450px;
	}
	#main_visual{
	display: flex;
	
	}
	#main_visual .main_box {
    width: 60%;
    margin: 0 auto;
	}
	#main_visual .ttl_box{
	width: 40%;
	}
	#main_visual .ttl_box .ttl {
    margin: 40% 0 0 20%;
	}
	#bl .catch_area .catch {
    justify-content: center;
	font-size: 17px;
	}
	#bl .staff_box {
    width: 40%;
    margin: 10% auto;
    }
	#bl .fukidashi {
    width: 11%;
    top: -17%;
    right: 28%;
	}
}

#bl .chap_box{
	width: 100%;
	display: flex;
	justify-content: flex-start;
    align-items: center;
	margin: 0 auto 5%;
}
#bl .chap_box .chap{
	width: 30%;
	margin-left: 5%;
}
#bl .chap_box .chap_ttl{
	font-size: 14px;
    width: 50%;
    margin: 0 0 1% 5%;
}
#bl .catch_area_2{
	margin: 0% 0 5% 5%;
}
#bl .catch_area_2 .catch_2{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
  font-weight: 600;
}
#bl .catch_area_2 .catch_2:before{
  	border-top: 1px solid;
    content: "";
    width: 1.0em; /* 線の長さ */
}
#bl .catch_area_2 .catch_2:before {
  margin-right: .5em;
  margin-top: 0px;
  margin-left: 5px;
}
#bl .txt{
	width: 90%;
	margin: 0 auto 10%;
}
@media only screen and (min-width: 768px) {
	#bl .chap_container{
	max-width: 1600px;
    margin: 0 auto;
	}
	#bl .chap_box {
    width: 55%;
	margin: 7% auto 3%;
    }
	#bl .chap_box .chap_ttl {
    font-size: 18px;
    width: 50%;
    margin: 0 0 2% 5%;
	}
	#bl .catch_area_2 .catch_2 {
    font-size: 22px;
	}
	#bl .catch_area_2 {
    width: 50%;
    margin: 0 auto 3%;
	}
	#bl .txt {
    width: 50%;
    margin: 0 auto;
	}
	#bl .chap_box .chap {
    width: 21%;
    }
}
#bl .tick_box{
	margin: 0 0 15% 5%;
}
#bl .tick_box .point{
	display: flex;
	align-items: center;
}
#bl .tick_box .point{
	width: 6%;
    margin: 0 0 3% 0;
} 
#bl .tick_box .tick{
	margin: 15% 18% 0 0;
} 
#bl .tick_box .point .po{
	font-size: 15px;
}
#bl .list_wrap{
	list-style:  none;  /* デフォルトのアイコンを消す */
    margin:  0;         /* デフォルト指定上書き */
    padding: 0;         /* デフォルト指定上書き */
}
#bl .list_wrap .list:before {
    content:  "";     /* 空の要素作成 */
    width:  3px;               /* 幅指定 */
    height:  3px;              /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #000;  /* 背景色指定 */
    border-radius:  50%;        /* 要素を丸くする */
    position:  relative;        /* 位置調整 */
    top: -3px;                  /* 位置調整 */
    margin-right: 5px;          /* 余白指定 */
}
@media only screen and (min-width: 768px) {
	#bl .tick_box {
    margin: 4% auto 10%;
    width: 50%;
	}
}
#bl .pants_box{
	display: flex;
    justify-content: space-evenly;
    align-items: center;
	margin: 0 auto 10%;
}
#bl .pants_box .pants1{
	width: 42%;
}
#bl .pants_box .ajust{
	width: 50%;
	font-size: 10px;
}
#bl .pants_box .ajust span{
	font-size: 12px;
	font-weight: 600;
}
@media only screen and (min-width: 768px) {
	#bl .pants_box {
    justify-content: space-around;
    align-items: center;
    margin: 5% auto 12%;
    width: 65%;
	font-size: 12px;
	}
	#bl .pants_box .ajust span{
	font-size: 15px;
    display: block;
	}
	#bl .pants_box .pants1 {
    width: 50%;
	}
	#bl .pants_box .ajust {
    width: 30%;
    font-size: 12px;
	}
}
#bl .detail_box {
	width: 100%;
	margin: 0 auto 12%;
}
#bl .detail_box .midashi{
	width: 90%;
	font-size: 14px;
	font-weight: 600;
	margin: 0 auto 2% 5%;
}
#bl .detail_box .detail{
	width: 90%;
	font-size: 11px;
	margin: 0 auto 5%;
}

@media only screen and (min-width: 768px) {
	#bl .detail_box {
    display: flex;
   	width: 70%;
    align-items: center;
    justify-content: space-around;
	}
	#bl .detail_box .midashi{
	width: 70%;
	font-size: 15px;
	margin: 0 0 2% 0;
	}
	#bl .detail_box .detail{
	width: 70%;
	font-size: 12px;
	margin: 0 0 0 0;
	}
	#bl .detail_box .detail_pic{
	width: 80%;
	}
}
#bl .detail_box2{
	position: relative;
	width: 100%;
    margin: 20% auto 12%;
}
#bl .detail_box2 .detail_pic2{
	margin: 0 auto;
	width: 100%;
}
#bl .detail_box2 .midashi{
	position: absolute;
	top: -9%;
	left: 5%;
	font-size: 14px;
}
#bl .detail_box2 .comment{
	position: absolute;
    top: 9%;
    left: 5%;
	font-size: 10px;
}
#bl .detail_box2 .comment img{
	position: absolute;
    top: 94%;
    left: 25%;
    width: 23%;
    rotate: -17deg;
}

#bl .detail_box2 .comment2{
	position: absolute;
    top: 12%;
    right: 3%;
    font-size: 10px;
}
#bl .detail_box2 .comment2 img{
	position: absolute;
    top: 104%;
    right: 87%;
    width: 27%;
    rotate: 60deg;
}
#bl .detail_box2 .comment3{
	position: absolute;
    bottom: 46%;
    right: 1%;
    font-size: 10px;
}
#bl .detail_box2 .comment3 img{
	position: absolute;
    top: 107%;
    right: 72%;
    width: 27%;
    rotate: 60deg;
}
@media only screen and (min-width: 768px) {
	#bl .detail_box2 {
    width: 660px;
    margin: 0 auto 10%;
	}
	#bl .detail_box2 .midashi {
    position: absolute;
    top: -5%;
    left: auto;
    right: 0;
	font-size: 15px;
	}
	#bl .detail_box2 .comment {
    left: 3%;
    font-size: 12px;
	}
	#bl .detail_box2 .comment img {
    left: 20%;
    width: 33%;
    rotate: -6deg;
	top: 100%;
	}
	#bl .detail_box2 .comment2 {
    top: 24%;
    right: 8%;
    font-size: 12px;
	}
	#bl .detail_box2 .comment2 img {
    top: 104%;
    right: 108%;
    width: 37%;
    rotate: 80deg;
	}
	#bl .detail_box2 .comment3 {
    position: absolute;
    bottom: 46%;
    right: 5%;
    font-size: 12px;
	}
	#bl .detail_box2 .comment3 img {
    position: absolute;
    top: 92%;
    right: 101%;
    width: 27%;
    rotate: 71deg;
	}
}
#bl .detail_box3{
	width: 100%;
	margin: 0 auto 12%;
}
#bl .detail_box3 .midashi{
	font-size: 14px;
	margin: 0 0 2% 5%;
}
#bl .detail_box3 .txt_3{
	
}
#bl .detail_box3 .detail_pic{
	
}
#bl .detail_box3 .list_wrap{
	list-style: none;
    margin: 0 0 7% 5%;
    padding: 0;
}
@media only screen and (min-width: 768px) {
	#bl .detail_box3{
	display: flex;
    width: 70%;
    margin: 0 auto 10%;
	align-items: center;
    justify-content: space-around;
	}
	#bl .detail_box3 .midashi{
	font-size: 15px;
	margin: 0 0 2% 5%;
	}
	#bl .detail_box3 .txt_3{
	width: 50%;
	}
	#bl .detail_box3 .detail_pic {
    width: 45%;
	}
}
#bl .ttl_styling{
	width: 43%;
	margin: 0 auto 10%;
}
#bl .styling_box{
	width: 100%;
	position: relative;
	margin: 15% auto 3%;
}
#bl .styling_box .styling_a{
	width: 100%;
	margin: 20% auto 2%;
}
#bl .styling_box .sty_col{
	font-family: "acumin-pro", sans-serif;
	font-weight: 600;
	font-style: normal;
}
#bl .styling_box .sty_col .number{
	font-size: 4em;
    position: absolute;
    top: -11%;
    left: 5%;
}
#bl .styling_box .sty_col .col{
	font-size: 2.5em;
    position: absolute;
    top: -4%;
    left: 5%;
}
#bl .styling_box .sty_name{
	font-family: "acumin-pro", sans-serif;
	font-weight: 400;
	font-style: normal;
}
#bl .styling_box .sty_name .size{
	font-size: .8em;
    position: absolute;
    top: -3%;
    right: 5%;
}
#bl .styling_box .sty_name .size span{
	font-weight: 600;
}
#bl .styling_box .styling_sub{
	display: flex;
    margin: 0 auto;
    width: 100%;
    justify-content: space-between;	
}
#bl .styling_box .styling_sub .sub_child{
	width: 48%;	
}
#bl .staff_comme{
	width: 90%;
	margin: 0 auto 10%;
	
}
#bl .credit_box{
	margin: 0 auto 25%;
}
#bl .button-1{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    margin: 0 auto;
    padding: .5em 1em;
    border: 1px solid #000000;
    border-radius: 25px;
    background-color: #fff;
    color: #000000;
    font-size: 1em;
}
#bl .button-2{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 110px;
    margin: 0 auto;
    padding: .5em 1em;
    /*border: 1px solid #000000;*/
    /*border-radius: 25px;*/
   /* background-color: #fff;*/
    color: #939393;;
    font-size: 1em;
}
#bl .credit{
	display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto 3%;
    align-items: center;
}
#bl .credit .item span{
	font-size: 9px;
	color: #979797;
}
#bl section{
	font-family: yu-gothic-pr6n, sans-serif;
}
@media only screen and (min-width: 768px) {
	#bl .ttl_styling {
    width: 20%;
    margin: 10% auto 10%;
	}
	#bl section{
	display: flex;
    width: 1200px;
    margin: auto;
    justify-content: space-around;
	}
	#bl section .sty_child{
		width: 46%;
	}
	#bl .styling_box .sty_col .number{
	top: -9%;
    }
	#bl .styling_box .sty_col .col{
	top: -3%;
	}
	#bl .styling_box .sty_name .size {
    font-size: 1em;
    }
}
#bl .all{
	width: 100%;
	margin: 0 auto 30%;
	font-family: yu-gothic-pr6n, sans-serif;
}
#bl .all p{
	width: 90%;
	text-align: center;
	margin: 5% auto;
}
#bl .all p .date{
	font-weight: 600;
	font-size: 12px;
}
#bl .all p .underline{
	border-bottom: 1px solid #000;
    padding-bottom: 7px;
}
#bl .logo{
	width: 54%;
	margin: 0 auto 20%; 
	
}
#bl .logo .copy{
	text-align: center;
	font-size: 9px;
	margin: 2% auto;
	font-family: "acumin-pro", sans-serif;
}
@media only screen and (min-width: 768px) {
	#bl .logo {
    width: 23%;
	margin: 10% auto;
	}
	#bl .logo .copy {
    font-size: 11px;
    margin: 5% auto;
    }
	#bl .all {
    width: 60%;
    margin: 0 auto 12%;
	
	}
}

/*********MARK***********/
mark{
  --color1: #ffff0045;
  --color2: #ffff0045;
  --bg-height: 40%;
  all: unset;
  background-image: linear-gradient(var(--color1), var(--color2));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 var(--bg-height);
  animation: highlight 800ms 1 ease-out;
  animation-fill-mode: forwards;
  animation-play-state: paused;

}
@-webkit-keyframes highlight {
  to {
    background-size: 100% var(--bg-height);
  }
}
@keyframes highlight {
  to {
    background-size: 100% var(--bg-height);
  }
}
/********* END MARK ***********/

/*********************************************
                js
*********************************************/
#bl .anim {
	opacity: 0;
	transition: 1.5s all 0s;
}
#bl .anim.ac {
	opacity: 1;
	transform: translate(0);
}
/*********************************************
                view
*********************************************/
.spview {
	display: block;
}
.pcview {
	display: none;
}
@media only screen and (min-width: 768px)  {
    .spview {
		display: none;
	}	
	.pcview {
		display: block;
	}
}