@charset "UTF-8";
/* CSS Document */

html { scroll-behavior: smooth;}


body,header,section,div,h1,h2,h3,h4,h5,h6,img,p,ul,li {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
    line-height:0;
}


#contents {
    width: auto;
    overflow: hidden;
    padding: 0;
}

.clearfix:after {
    display: block;
    clear: both;
    content: "";
}


a:hover img {opacity: 0.7;}
  
ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
li { list-style: none; }


.pc{display: block !important;}
.sp{display: none !important;}
@media screen and (max-width: 750px){
    .pc{display: none !important;}
    .sp{display: block !important;}
}



/* script用 */
.wrap {
    opacity: 0;
    -webkit-transform: translateY(20px);
	transform: translateY(20px);
	transition: 1s;
    text-align: center;
}
.wrap.on {
	opacity: 1;
    -webkit-transform: translateY(0);
	transform: translateY(0);
}
.para {
	opacity: 0;
    -webkit-transform: translateY(2em);
	transform: translateY(2em);
	transition: 1s ease-out;
}
.para.on {
	opacity: 1;
    -webkit-transform: translateY(0);
	transform: translateY(0);
}
.para2 {
	opacity: 0;
	transition: 1s ease-out;
}
.para2.on {opacity: 1;}
.para4 {
	display: none !important;
}
.para4.on {
	display: block !important;
	opacity: 0;
	transition: 1s ease-out;
}
.para4.on.op {opacity: 1;}
/* script用 */

/* 追従バナー */
.bnr {
	margin: 0 auto;
	display: block;
	position: fixed;
	bottom: 20px;
	left:50%;
	transform: translateX(-50%);
}
.bnr > * {
    display: block;
    vertical-align: top;
}
.bnr.on {display: table;}
.bnr.on > * {
    display: table-cell;
    vertical-align: top;
}
@media screen and (max-width: 750px){
	.bnr {
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
}


header {
    background-color: #D13933;
    vertical-align: bottom;
    line-height:0;
}

footer {
    background-color: #CCCCCC;
	padding-top: 2em;
    padding-bottom: 10em;
    font-family: Hiragino Kaku Gothic ProN W3;
}
@media screen and (max-width: 750px){
	footer {
		padding-top: 5%;
		padding-bottom: 25%;
	}
}

.title {
	background: url("../img/yms_title_pc_bg.png") repeat-x 50% 0;
	background-size: contain;
    background-position: bottom;
}
.title > img {margin: 0 auto; }
@media screen and (max-width: 750px) {
    .title {background: none;}
}

.sec {padding-bottom: 100px;}
.sec2 {padding-bottom: 120px;}
.sec3 {padding-bottom: 170px;}

.box_bg {background-color: #F2F0EF;}
.box > * {
    max-width: 940px;
    margin: 0 auto;
    position: relative;
}
.box > div > img {margin: 0 auto;}
.box > ul {
    display: table;
    position: relative;
    padding-bottom: 2em;
}
.box > ul > * {
    display: table-cell;
    vertical-align: top;
}
.box p {width: 700px;}
.text {
    margin: 0 auto;
    padding-bottom: 2em;
    text-align: left;
    font-family: Hiragino Kaku Gothic ProN W3;
    font-size: 1.3em;
    line-height: 1.7em;
}
.ex { padding-bottom: 4em; }

span {background: #FFEFB7;}

.yms_img {background: #F2F0EF url("../img/yms_sec1_04_bg_pc.png") repeat-x 50% 0;}
.yms_img > img {margin: 0 auto;}

.bg_book {
	background: url("../img/yms_book_bg_pc.png") no-repeat;
	background-size: contain;
	background-position: top;
}
@media screen and (max-width: 750px) {
	.bg_book {
	background: url("../img/yms_book_bg_sp.png")no-repeat;
	background-size: contain;
	background-position: top;
}
}
.bg_book > ul { padding-bottom: 0;}
.box > a > img {margin: 0 auto;}


.box_bg_2 { background-color: #AF8C57; }
.box_bg_2 > .text {
	color: #FFF;
	padding-bottom: 2em;
}
.shindan { padding-bottom: 5em; }
.shindan ul {
	display: flex;
	max-width: 918px;
	margin: 0 auto;
}
.shindan li { position: relative; }
.btn {
	position: absolute;
	width: 100%;
	bottom: 10%;
	left: 50%;
	transform: translateX(-50%);
	background: url("../img/yms_sec2_btn_bg_pc.png") no-repeat;
    background-size: cover;
    background-position: center;
}
.btn a {display: block}
.btn a:hover {opacity: 0;}


.type {
    background: url("../img/yms_sec3_bg_pc.png") repeat-x 50% 0;
    background-size: 100% auto;
    background-position: top;
	padding-bottom: 3em;
	margin-bottom: 5em;
}
.type1 {background-color: #F2F0EF;}
.type2 {background-color: #DAD9D6;}
.type > div > .text {
	max-width: 800px;
	margin: 0 7%;
}
.youtube {
	max-width: 940px;
	padding: 0;
	box-sizing: border-box;
	margin: 0 auto;
}
.youtube > .inner {
	padding-top: 56.25%;
	position: relative;
	height: 0;
	overflow: hidden;
}
.youtube > .inner > iframe {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 85%;
	height: 85%;
}

.box_bg5 { background-color: #99B7C6; }
.box_bg5 > .text { color: #FFF; }
.sofa_img { background: url("../img/yms_sec4_02_bg_pc.png") repeat-x 50% 0; }
.sofa_img > img { margin: 0 auto; }

.box3 > * {
    max-width: 700px;
    margin: 0 auto;
    position:relative;
}
.box3 > div > img {
    position: absolute;
    z-index: 2;
    top: -40px;
    right: -190px;
}
.box3 > .text {
    display: inline-block;
    padding-right: 110px;
    padding-bottom: 6em;
}
.box_bg3 { background-color: #F2F0EF; }


.box4 > * {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}
.box4 > div > img {
    position: absolute;
    top: -65px;
    left: 50%;
    transform: translateX(-50%);
}
.box4 { padding-bottom: 3em; }
.box_bg4 { background-color: #D13933; }
.box4 li { position: relative; }
img.btn_syk {
	position: absolute;
	bottom: 20%;
	left: 5%;
}


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

.sec, .sec2, .sec3 {
    display: block;
    position: relative;
}
.sec { padding-bottom: 15%; }
.sec2, .sec3 { padding-bottom: 20%; }

.title {background: none;}

.box > ul > * {display: block;}
.box > ul {padding-bottom: 0;}
.box > p {width: auto;}
.type {margin-bottom:3em;}
.text {
    margin: 0 10%;
    padding-bottom: 2em;
    font-size: 1.25em;
    line-height: 1.6em;
}

.yms_img {
    vertical-align: bottom;
    background-image: none;
	padding-top:5em;
}


.shindan { padding-bottom: 12%; }
.shindan ul { display: block; }
.btn {
    bottom: 9%;
    background: url("../img/yms_sec2_btn_bg_sp.png") no-repeat;
    background-size: cover;
    background-position: center; 
}

.box {width: 100%;}
.type {padding-bottom: 0;}
.type > div > .text {margin: 0 15%;}
.youtube {max-width: 750px;}
.youtube > .inner > iframe {
	width: 100%;
	height: 100%;
}
.youtube_sp {margin-bottom:3em;}


.box_bg3 {
    background: url("../img/yms_sec5_01_bg_sp.png") no-repeat;
    background-size: contain;
    background-position: bottom 0 right 0;
    background-color: #F2F0EF;
}
.box3 > .text {
    padding-right: 21%;
    padding-bottom: 4em;
}
.box4 {padding-bottom: 0;}
.box4 > div > img {
	position: absolute;
	top: 0;
    left: 50%;
    transform: translate(-50%,-35%);
}

img.btn_syk {
	position: absolute;
	bottom: 8%;
	left: 50%;
    transform: translateX(-50%);
}

}