@charset "UTF-8";
/* CSS Document */
body{margin: 0px !important;}
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;
}
#bl{
    padding: 0;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    margin: 0 auto;
    line-height: 2.0;
    font-size: 11px;
    letter-spacing: 1px;
	width: 100%;
    box-sizing: border-box;
    color: #111111;
    -webkit-text-size-adjust: 100%;
	overflow: hidden;
}
#bl a {
	text-decoration: none;
	color: #2b2b2b;
}
#bl p {
    margin: 0;
}
#bl　a:hover {
	opacity: 1;
}
#bl .clear{
	clear: both;
}
#bl img{
    width: 100%;
    vertical-align: bottom;
    line-height: 0;
}
#bl ul,#bl li {
	list-style: none;
	padding: 0;
	margin: 0;
}
#bl .f-en {font-family: "ivymode", sans-serif;}

@media only screen and (min-width: 769px)  {
	#bl {
		font-size: 12px;
	}
}
/************************************************************
                main 
************************************************************/
#bl #bl_header {
	margin: 0 auto 20%;
    position: relative;
    height: 56vh;
}
#bl #bl_header img {
    position: absolute;
}
#bl #bl_header img:nth-of-type(1) {
    width: 56%;
	z-index: 2;
}
#bl #bl_header img:nth-of-type(2) {
     width: 54%;
	bottom: 0%;
	right: 0%;
}
#bl #bl_header img:nth-of-type(3) {
    z-index: 2;
    width: 26%;
    top: 3%;
    right: 3%;
	animation: 8s linear infinite kurukuru;
}
#bl #bl_header img:nth-of-type(4) {
	z-index: 3;
    width: 71%;
    bottom: -9%;
    left: 4%;
}
#bl .read {
	 padding: 5% 10% 15%;
     border-bottom: solid 1px;
	text-align: justify;
}
@media only screen and (min-width: 769px)  {
	#bl #bl_header {
		width: 1000px;
        margin: 0 auto 90px;
        height: 740px;
	}
	#bl #bl_header img:nth-of-type(1) {
		width: 420px;
	}
	#bl #bl_header img:nth-of-type(2) {
		width: 400px;
		bottom: 0%;
		right: 0%;
	}
	#bl #bl_header img:nth-of-type(3) {
		width: 165px;
        top: 69px;
        right: 318px;
	}
	#bl #bl_header img:nth-of-type(4) {
		width: 460px;
        bottom: 25px;
        left: 30px;
	}
	#bl .read {
        margin: 0 auto;
        padding: 0% 22% 90px;
	}
}
/************************************************************
                #contents 
************************************************************/
#bl #contents {
	max-width: 100%;
	margin: 23% auto 6%;
}
#bl #contents section {
	width: 100%;
    margin: 0% auto 32%;
}
#bl #contents .item {
	background: linear-gradient(180deg, #ffffff 0%, #ffffff 30%, #dbdbdb 30%, #dbdbdb 100%);
}
#bl #contents .item .pic {
	display: block;
    margin: 0px auto;
    width: 100%;
}
#bl #contents .item .item-pic {
	position: relative;
	display: block;
	width: 72%;
    margin: 0 auto;
	border: solid 1px #646464;
}
#bl #contents .item .item-pic .no {
	position: absolute;
    width: 32%;
    top: -10.5%;
    right: -15%;
    animation: 8s linear infinite kurukuru;
}
@keyframes kurukuru {
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}
#bl #contents .item .item-tex {
	margin-top: -5%;
    position: relative;
}
#bl #contents .item .item-tex .midashi {
    width: 46%;
    margin: 0 auto;
    display: block;
}
#bl #contents .item .item-tex .tex {
	width: 86%;
    margin: 12% auto 0;
	text-align: justify;
}
#bl #contents .item .main_cre {
	text-align: center;
    font-family: "aktiv-grotesk", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 10px;
    padding: 10% 0 14%;
}
#bl #contents .item .main_cre a {
	display: block;
    margin: 4% auto 0;
    width: 10%;
}
#bl #contents .item .main_cre a img {
	width: 100%;
}
@media only screen and (min-width: 768px)  {
	#bl #contents {
		margin: 0 auto 6%;
	}
	#bl #contents section {
        margin: 0% auto;
        padding-bottom: 200px;
        background: #fff;
	}
	.back {
        background: linear-gradient(180deg, #ffffff 0%, #ffffff 56%, #dbdbdb 56%, #dbdbdb 100%);
        padding: 10% 0 9%;
    }
	#bl #contents section .item {
		width: 880px;
		margin: 0 auto;
		display: flex;
        align-items: center;
        justify-content: space-between;
		background: none;
	}
	#bl #contents .item .item-pic {
		width: 44%;
		margin: 0;
	}
	#bl #contents .item .tex {
		width: 100%;
		margin: 0 auto 0;
	}
	#bl #contents .item .item-tex {
		width: 46%;
	}
	#bl #contents .item .main_cre {
		font-size: 11px;
		padding: 10% 0 0;
	}
}

/************************************************************
               styling
************************************************************/
#bl #contents section .styling {
	margin-bottom: 25%;
}
#bl #contents section .styling .styling-pic {
	position: relative;
    height: 50vh;
    margin-top: 20%;
}
#bl #contents section .styling .styling-pic img {
	position: absolute;
	width: 52%;
}

#bl #contents section .styling .styling-pic img:nth-of-type(1) {
	top: 0;
	left: 0;
	z-index: 2;
}
#bl #contents section .styling:nth-of-type(3) .styling-pic {
	margin-bottom: 11%;
}
#bl #contents section .styling .styling-pic img:nth-of-type(2) {
	bottom: 0;
	right: 0;
}
#bl #contents section .styling:nth-of-type(3) .styling-pic img:nth-of-type(1) {
	top: auto;
	bottom: 0;
	left: 0;
	z-index: 2;
}
#bl #contents section .styling:nth-of-type(3) .styling-pic img:nth-of-type(2) {
	bottom: auto;
	top: 0;
	right: 0;
}

#bl #contents section .text {
	width: 84%;
    margin: -6% auto 0;
	font-family: "aktiv-grotesk", sans-serif;
}
#bl #contents section .text .styling-ttl {
	display: block;
    width: 40% !important;
    margin: 0 0 8% -3%;
}
#bl #contents section .text .comment  {
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    margin: 0 0 12%;
}
#bl #contents section .text .midashi {
	display: block;
    width: 60%;
    margin: 0 auto 14%;
}
#bl #contents section .text a {
    position: relative;
    display: block;
    border-bottom: solid .7px #111;
    margin: 0 auto 3%;
    padding-bottom: 2%;
}
#bl #contents section .text a::after {
	content: ">";
    position: absolute;
    top: 40%;
    right: 2%;
    transform: translate(0, -50%);
    font-size: 11px;
}
#bl #contents section .text a span {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .8px;
}
#bl #contents section .text .cms::after {
	content: "COMING SOON";
    position: absolute;
    top: 39%;
    right: 2%;
    transform: translate(0, -50%);
    letter-spacing: .8px;
    color: #a0a0a0;
    line-height: 0;
    font-size: 10px;
}
#bl #contents section .text .i-main {
	margin: 0 0 1% 4%;
    width: 30%;
}

@media only screen and (min-width: 768px)  {
	#bl #contents section .styling {
        display: flex;
        align-content: center;
        justify-content: space-between;
        width: 1080px;
        margin: 250px auto;
		flex-direction: row-reverse;
    }
	#bl #contents section .styling:nth-of-type(3) {
        flex-direction: row;
		margin: 150px auto;
    }
	#bl #contents section .styling:nth-of-type(4) {
		margin: 0px auto;
    }
	#bl #contents section .styling .styling-pic {
		height: 400px;
        margin-top: 0;
        width: 58%;
	}
	#bl #contents section .text {
        width: 32%;
		margin: 0;
	}
}
/************************************************************
                js
************************************************************/
#bl .anim {
	opacity: 0;
	transition: 1.5s all 0s;
}
#bl .anim.ac {
	opacity: 1;
	transform: translate(0);
}
#bl .fade-right {
  transform: translate3d(-50px, 0, 0);
  transition: 1s all 0s;
  opacity: 0;
}
#bl .fade-right.ac {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
#bl .fade-left {
  transform: translate3d(50px, 0, 0);
  transition: 1s all 0s;
  opacity: 0;
}
#bl .fade-left.ac {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
/************************************************************
                view
************************************************************/
#bl .spview {
	display: block;
}
#bl .pcview {
	display: none;
}
@media only screen and (min-width: 768px)  {
     #bl .spview {
		display: none;
	}	
	#bl .pcview {
		display: block;
	}
}