@charset "utf-8";

body{
	font-family:'Noto Sans JP',serif;
	background-image: url(img_cosme_all/cosme_bk.png);
	background-repeat: repeat-y;
	background-position: left top;
	color:#003559;
}

h1,h2,h3,h4,h5{font-weight:400;}



.navigation{
	display:flex;
	position:fixed;
	bottom:20px;
	right:20px;
	background-color:rgba(234,246,253,0.8);
	align-items:center;
	text-align:center;
	font-size:0.9rem;
}
.navigation p{line-height:120%;padding:10px 5px;}

.to-top{
	background-color:#003559;
	color:#fff;
	padding:10px;
	text-align:center;
	line-height:100%;
}
.to-top a:link,
.to-top a:visited{color:#fff;}





header{align-items: center;}

header li {padding: 0 15px;}





.page_cosme_top_head_menu{background-color:#003559;padding:30px 0;}
.page_cosme_top_head_menu h1{
	font-family: 'Noto Serif JP', serif;
	font-size:1.3rem;
	font-weight:400;
	text-align:center;
	color:#fff;
}

.page_cosme_top_head_menu ul{font-size:0;padding:0;margin:0;text-align:center;}
.page_cosme_top_head_menu li{
	font-size:0.9rem;
	display:inline-block;
	padding:0 14px;
	border-right:1px solid #fff;
}
.page_cosme_top_head_menu li:last-child{border:none;}

.page_cosme_top_head_menu li a:link,
.page_cosme_top_head_menu li a:visited{color:#FFF;}





.page_cosme_top_head_visual{position:relative;}
.top_head_visual{width:100%;}
.top_head_visual img{width:100%;}
.page_cosme_top_head_visual .top_head_logo{position:absolute;bottom:20px;left:20px;}


.page_cosme_top_contents{

	background-image: url(img_cosme_all/contents_visual.png);
	background-repeat: no-repeat;
	background-position: right top;
	background-size:800px 547px;
	color:#003559;
	
}

.page_cosme_top_contents p{
	margin-bottom:15px;
	line-height: 180%;
	font-size: 0.95rem;
}

.page_cosme_top_contents_text{padding:40px 0;}

.page_cosme_top_contents_text_add h1{font-weight:400;margin-bottom:5px;}
.page_cosme_top_contents_text_add h1::before{content:"●";}
.page_cosme_top_contents_text_add p{font-size:0.9rem;margin-bottom:0;}


.page_cosme_top_bottom{color:#003559;display:flex;justify-content:space-between;align-items: center;margin-bottom:40px;}
.page_cosme_top_bottom_kakomi{background-color:#f2f2f2;width:620px;padding:50px 80px;}

.page_cosme_top_bottom_kakomi h2{font-weight:300;font-size:0.9rem;}
.page_cosme_top_bottom_kakomi h1{font-weight:400;font-size:1.8rem;margin-bottom:10px;}
.page_cosme_top_bottom_kakomi h3{font-weight:300;font-size:1.2rem;margin-bottom:10px;}
.page_cosme_top_bottom_kakomi p{font-weight:300;font-size:1.0rem;line-height:180%;}


.page_cosme_top_bottom_kouka{position:relative;z-index:9;}
.page_cosme_top_bottom_kouka p{margin-bottom:80px;margin-right:-40px;}

.page_cosme_top_contents_text_add h2,
.page_cosme_top_bottom_kouka h2{
	display:inline-block;
	font-weight:400;
	border:1px solid #003559;
	margin:5px 0;
	padding:2px 10px;
	font-size:0.9rem;
}

.page_cosme_top_bottom_kouka ul{margin-left:0;padding-left:0;}
.page_cosme_top_bottom_kouka li{list-style:none;}
.page_cosme_top_bottom_kouka li::before{content:"□";}

.page_cosme_shop{padding:20px 0;}
.page_cosme_shop h2{background:#003559;color:#fff;font-weight:700;padding:2px 20px;display:inline-block;}


/**/
.page_cosme_top_a{
	display: flex;
	justify-content: space-between;

	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 700px;
	padding-bottom: 240px;
}

.page_cosme_top_1{background-image: url(img_cosme_all/01_visual.jpg);}
.page_cosme_top_2{background-image: url(img_cosme_all/02_visual.jpg);}
.page_cosme_top_3{background-image: url(img_cosme_all/03_visual.jpg);background-position-x: 200px;}

.page_cosme_top_a h2{margin-top:10px;}
.page_cosme_top_a p{font-size:0.9rem;}

.page_cosme_a_over{display:flex;}



.page_cosme_a > p {padding:50px 0;}

.page_cosme_flex3{display:flex;justify-content:space-between;padding-bottom:50px;}

.page_cosme_flex3-border{border-bottom:1px solid #003559;}

.page_cosme_flex_part{width:32%;}
.page_cosme_flex_part h1{font-family: 'Noto Serif JP', serif;margin-bottom:0;text-align:center;}
.page_cosme_flex_part h1 span{font-size:3.6rem;}
.page_cosme_flex_part h2{font-size:0.9rem;background-color:#003559;color:#fff;text-align:center;font-weight:400;padding:10px 0;margin-bottom:10px;}
.page_cosme_flex_part p{font-size:0.9rem;}

.page_cosme_a{width:830px;}
.page_cosme_flex3_side{text-align:center;width:240px;}

.page_cosme_flex3_side_03{margin-top:-240px;}


.spec-over{display:flex;justify-content:space-between;position: relative;}
.spec{}
.spec div{background-color:#F2F2F2;padding:40px;font-size:0.8rem;width:600px;}
.spec-side{width:300px;position: relative;bottom:-80px;}


.spec_03{margin-top:-80px;margin-bottom:50px;}


.spec-side h1,
.spec-side h2{font-family: 'Noto Serif JP', serif;}
.spec-side h1{font-size:1.6rem;}
.spec-side h2{font-size:0.9rem;}

.chart{background-color:#eaf6fd;margin-top: -100px;margin-left:80px;padding-top:150px;}

.chart-inner{margin:0 auto;font-family: 'Noto Serif JP', serif;}
.chart-inner h1{font-size:0.9rem;background-color:#003559;color:#fff;text-align:center;font-weight:400;padding:10px 20px;margin-bottom:10px;display:inline-block;}


.howto_flex{display:flex;justify-content:space-between;}
.howto_part{width:24%;}
.howto_part img{width:90%;margin:10px auto;}
.howto_part h1 {font-size: 1.6rem;font-family: 'Noto Serif JP', serif;}
.howto_part h2 {font-size: 1.2rem;font-family: 'Noto Serif JP', serif;text-align:center;}
.howto_part h3 {
	font-size:0.9rem;
	background-color:#003559;
	color:#fff;
	text-align:center;
	font-weight:400;
	padding:5px 20px;
	margin:20px 0 5px 0;
	display:inline-block;
}
.howto_part_top h2{text-align:left;}


.point_kakomi{text-align:right;margin-top:50px;}
.point_kakomi ul{display:inline-block;padding:5px 10px;}
.point_kakomi ul{background:#003559;color:#fff;margin:0;padding:5px 20px;list-style:none;}
.point_kakomi ul li{line-height:130%;text-align:left;margin:5px 0;}
.point_kakomi ul li:first-child{
	background:#fff;
	border:1px solid #003559;color:#003559;
	border-radius:5px;
	position:relative;
	top:-28px;
	right:-50px;
	text-align:center;
	margin-bottom:0;
	padding: 0 20px;
}
.point_kakomi ul li:nth-child(2){margin-top:-20px;}
.point_kakomi ul li:before{
	content:"☑";
	font-size:1.4rem;
}
.point_kakomi ul li:first-child:before{content:"";}

.chart{padding-left:20px;padding-right:20px;}
.chart-inner>p{text-align:left;margin-bottom:40px;}

.chart_flex{display:flex;justify-content:space-between;margin:40px auto;width:760px;padding-bottom:50px;}
.chart_flex p{width:46%;}

.chart_flex p img{width:100%;}
.chart_flex p span{display:block;background:#fff;padding:1px 0;text-align:center;margin-bottom:15px;}

.mov{
	/*width:1020px;text-align:center;*/
	width: 640px;
    text-align: center;
    margin: auto;
}
.mov video{width:100%;}

.page_menu_page{margin-top:20px;}


@media screen and (max-width:1180px){
body{background-image:none;}

}

@media screen and (max-width:959px){
	
footer{padding-bottom:50px;}
	
.page_cosme_top_head_menu li{border:none;}

.page_cosme_top_1 {/*background-size: cover;*/}

.page_cosme_top_bottom{display:block;}
.page_cosme_top_bottom_kakomi{padding:10%;width:80%;}
.page_cosme_top_bottom_kouka p{margin:0 auto 10px auto;text-align:center;}
.page_cosme_top_bottom_kouka h1{width:90%;margin:0 auto;text-align:center;}

.page_cosme_top_contents {/*background-position: center top;*/}
.page_cosme_top_contents_text {padding: 10%;margin-bottom:20px;background: rgba(255,255,255,0.5);}
.page_cosme_top_bottom_kouka {text-align: center;}
.page_cosme_top_bottom_kouka li{display:inline-block;}

.page_cosme_flex3-border{border:none;}

/* */


.page_cosme_top_1{}
.page_cosme_top_title{text-align:center;padding-bottom: 50px;}
.page_cosme_top_title img{width:90%;}

.page_cosme_top_copy{text-align:center;margin-top:20px;}

.page_cosme_a{width:100%;}
.page_cosme_top_a{
	display:block;
	padding-bottom:200px;
	background-size:90%;
	margin-bottom:20px;
}
.page_cosme_a > p{width:90%;margin:20px auto;}
.page_cosme_top_copy img{width:30%;}
.page_cosme_a_over{display:block;}
.page_cosme_flex3{display:block;}
.page_cosme_flex_part{width:90%;margin:10px auto;}

.page_cosme_flex3_side{text-align:center;width:100%;}
.page_cosme_flex3_side img{width:30%;}


.page_cosme_shop{width:90%;margin:auto;}



.spec-over{display:block;}

.spec-side{width:90%;bottom:0;margin:0 auto 20px auto;}

.spec div {padding: 5%;width: 90%;}

.chart {
    margin-top: 0;
    margin-left: 0;
    padding-top: 50px;
}


.chart_flex{display:block;width:90%;margin:0 auto;}
.chart-inner{width:96%;}
.chart-inner p img{width:100%;}

.chart_flex p{width:100%;margin-bottom:10px;}

.howto_flex{display:block;width:90%;margin:20px auto;}
.howto_part {width: 100%;text-align:center;}

.howto_part h1,
.howto_part h2,
.howto_part p{text-align:center;}

.howto_part h2{margin-top:40px;}
.howto_part img{width:56%;display:block;margin:10px auto;}

.point_kakomi ul li:first-child{right:0;}


.mov{width:100%;}



.page_cosme_top_3 {background-position-x: 40%;}
.page_cosme_flex3_side_03 {margin-top:0;}
.spec_03 {margin-top:0;}

.navigation{

	position:fixed;
	bottom:0;
	right:0;
	font-size:0.9rem;
	justify-content: space-between;
	width:100%;
}

}


}