﻿/* 2018.06 フリーページ　umou1806 */
/* 共通 */
#umou1806 {
    margin-bottom: 20px;
}
#umou1806 p {
    line-height: 1.7;
    font-weight: 200;
    font-size: 0.9em;
}
#umou1806 h1,
#umou1806 h2,
#umou1806 h3,
#umou1806 h4,
#umou1806 h5,
.umou1806-item-list-ttl {
    background: none;
    padding: 0;
    margin: 0;
    border: none;
    text-align: left;
}
#umou1806_mv {
    margin-bottom: 6vw;
}
.anchor-link-area {
    margin: 0 3%;
}
.anchor-link-area .inner-box {
    background: url(/ec/img/event/umou1806/sp/umou2008_link_bg.png) no-repeat;
    background-size: 100% 100%;
    padding: 10px 4% 20px;
}
.anchor-link-area .inner-flex-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.anchor-link-area .inner-flex-box figure {
    width: 35%;
    margin-right: 10px;
}
.anchor-link-area .inner-flex-box p {
    text-align: center;
}
.anchor-link-area .is-cool {
    position: relative;
    z-index: 0;
}
.anchor-link-area .is-cool::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 71%;
    height: 5px;
    background: #cfe9f5;
    z-index: -1;
}
.anchor-link-area a {
    color: #fff;
    background: #1090cf;
    font-size: 4vw;
    text-align: center;
    display: block;
    font-weight: 600;
    border-radius: 50px;
    padding: 10px;
    position: relative;
    transition: .2s all;
}
/*.anchor-link-area a::after {
    content: "▼";
    margin-left: 10px;
    font-size: 3vw;
    display: inline-block;
    position: absolute;
    top: 30%;
}*/
.anchor-link-area a:hover {
    opacity: .8;
}
.anchor-link-area .text-box {
    margin-left: 50px;
    font-size: 20px;
    text-align: center;
    font-weight: 200;
}
#umou1806 h2,
.umou1806-item-list-ttl {
    color: #1090cf;
    text-align: center;
    font-size: 5vw;
    margin-bottom: 9vw;
    font-weight: 500;
    overflow-x: revert;
}
#umou1806_symptom h2 strong,
.umou1806-item-list-ttl strong {
    font-size: 5.8vw;
    letter-spacing: -2px;
    font-weight: 500;
}
#umou1806 .anchor-link-area h2 strong {
    color: #1090cf;
    margin-right: 5px;
}
#umou1806 section {
    margin: 8vw 0 0;
}
/* こんな症状に悩まされていませんか？ */
#umou1806_symptom .symptom_check {
    margin-bottom: 40px;
    padding-bottom: 100px;
    background: url(/ec/img/event/umou1806/sp/umou2008_symptom_all.png) no-repeat;
    background-position: center bottom;
    background-size: 95%;
}
#umou1806_symptom .symptom_check ul {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 8%;
}
#umou1806_symptom .symptom_check ul li {
    width: calc((100% - 40px) / 2);
    color: #555;
    line-height: 2.5;
    letter-spacing: 1px;
    background: url(/ec/img/event/umou1806/umou1806_symptom_mark.png) no-repeat;
    background-position: 0 center;
    background-size: 15px;
    padding-left: 23px;
    white-space: nowrap;
    font-size: 12px;
}
#umou1806_symptom .symptom_text {
    letter-spacing: 0.04rem;
    padding-top: 35px;
}
#umou1806_symptom .symptom_about {
    background: #f1f6fa;
    margin-bottom: 39vw;
    padding: 30px 3%;
    position: relative;
}
#umou1806_symptom .symptom_about h2 {
    margin-bottom: 20px;
    font-size: 4vw;
}
#umou1806_symptom .symptom_about .inner-box {
    background: #fff;
    border-radius: 20px;
    padding: 20px 20px 0;
}
#umou1806_symptom .symptom_about .inner-box p {
    margin-bottom: 20px;
}
#umou1806_symptom .symptom_about .inner-box::after {
    content: "";
    display: block;
    background: url(/ec/img/event/umou1806/umou2008_symptom_img.png) no-repeat;
    background-position: center;
    width: 100%;
    height: 55vw;
    background-size: contain;
}
#umou1806_symptom .is-allow {
    font-size: 4.5vw;
    background: url(/ec/img/event/umou1806/umou2008_symptom_arrow_bg.png) no-repeat;
    background-position: center;
    background-size: 40%;
    position: absolute;
    bottom: -41vw;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    height: 40vw;
    padding-top: 15vw;
}
/* 上質な眠りには、天然の羽毛が理想的 */
#umou1806_about h2 {
    
font-size: 7vw;
}
#umou1806_about .is-read {
    text-align: center;
    margin: 0 5% 25px;
}
#umou1806_about .about_list {
    margin: 0 10%;
}
#umou1806_about .about_list li {
    text-align: center;
    margin-bottom: 25px;
}
#umou1806_about .about_list .tit {
    font-size: 7vw;
    margin-bottom: 10px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    padding: 55px 0;
    font-weight: 500;
}
#umou1806_about .about_list li:nth-child(1) .tit {
    background-image: url(/ec/img/event/umou1806/about_list_bg01.png);
    color: #fe8179;
}
#umou1806_about .about_list li:nth-child(2) .tit {
    background-image: url(/ec/img/event/umou1806/about_list_bg02.png);
    color: #1090cf;
}
#umou1806_about .about_list li:nth-child(3) .tit {
    background-image: url(/ec/img/event/umou1806/about_list_bg03.png);
    color: #68b83d;
}
#umou1806_why {
    background: #f9efe8;
    padding: 20px 0 25px;
}
#umou1806_why h2 {
    text-align: center;
    margin-bottom: 15px;
    background: #fdaba6;
    background: -moz-linear-gradient(left, #f9efe8 -20%, #fdaba6 30%, #fdaba6 50%, #fdaba6 70%, #f9efe8 120%);
    background: -webkit-linear-gradient(left, #f9efe8 -20%, #fdaba6 30%, #fdaba6 50%, #fdaba6 70%, #f9efe8 120%);
    background: linear-gradient(to right, #f9efe8 -20%, #fdaba6 30%, #fdaba6 50%, #fdaba6 70%, #f9efe8 120%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f6fa', endColorstr='#f1f6fa', GradientType=1);
    color: #fff;
    padding: 10px 0;
}
#umou1806_why ul {
    margin: 0 10%;
}
#umou1806_why li {
    margin-bottom: 25px;
}
#umou1806_why li figure {
    margin-bottom: 15px;
}
#umou1806_why h3 {
    margin-bottom: 20px;
    font-weight: normal;
}
#umou1806_why li:last-child {
    margin-bottom: 0;
}
#umou1806_why .is-num {
    vertical-align: middle;
    margin-right: 6px;
    display: inline-block;
    width: 10%;
}
#umou1806_why .is-num img {
    max-height: 100%;
}
/* 実はオールシーズン使えます！ */
#umou1806_season .is-read {
    text-align: center;
    margin-bottom: 15px;
}
#umou1806 #umou1806_season {
    margin: 40px 2% 0;
}
.is_season_list li {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #c9c9c9;
    align-items: center;
    justify-content: center;
}
.is_season_list li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
.is_season_list li .inner-box {
    margin: 0 5%;
}
.is_season_list figure {
    margin: 0 5% 15px;
}
.is_season_list .season_name {
    font-size: 25px;
    text-align: center;
}
.is_season_list .season_name .is-small {
    font-size: 12px;
}
.is_season_list .season_name .is-small::before,
.is_season_list .season_name .is-small::after {
    content: "";
    width: 5px;
    height: 2px;
    background: #ccc;
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px;
}
.is_season_list .is-summer .season_name {
    color: #5180cd;
}
.is_season_list .is-summer .season_name .is-small::before,
.is_season_list .is-summer .season_name .is-small::after {
    background: #5180cd;
}
.is_season_list .is-spr_aut .season_name {
    color: #e8d535;
}
.is_season_list .is-spr_aut .season_name .is-small::before,
.is_season_list .is-spr_aut .season_name .is-small::after {
    background: #e8d535;
}
.is_season_list .is-winter .season_name {
    color: #686868;
}
.is_season_list .is-winter .season_name .is-small::before,
.is_season_list .is-winter .season_name .is-small::after {
    background: #686868;
}
/* 商品一覧見出し */
.umou1806-item-list-ttl span {
    display: inline-block;
    position: relative;
    padding: 65px 0 0;
    z-index: 1;
    width: 100%;
}
.umou1806-item-list-ttl span::before,
.umou1806-item-list-ttl span::after {
    content: "";
    display: block;
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    z-index: -1;
}
.umou1806-item-list-ttl span::before {
    width: 130px;
    height: 60px;
    background-image: url(/ec/img/event/umou1806/umou2008_ttl_bg_01.png);
    left: 0;
    top: 0;
}
.umou1806-item-list-ttl span::after {
    width: 130px;
    height: 80px;
    background-image: url(/ec/img/event/umou1806/umou2008_ttl_bg_02.png);
    background-position-x: 20px;
    right: 0;
    bottom: -20px;
}


#umou1806 .anchor-link-area .inner-flex-box > p,
#umou1806 .anchor-link-area .inner-flex-box + p {
	font-weight: bold;
    text-align: center;
}
#umou1806 .anchor-link-area .inner-flex-box + p {
	margin: 10px auto 5px;
}

/* ダウンケット・羽毛掛け布団とは */
.symptom_what {
    margin: 0 calc(20 * (100vw / 750)) calc(65 * (100vw / 750));
    padding: calc(60 * (100vw / 750)) calc(35 * (100vw / 750)) calc(40 * (100vw / 750));
	text-align: center;
    background: #f1f6fa url(/ec/img/event/umou1806/sp/what_bg.png) no-repeat top center;
	background-size: contain;
}
#umou1806 .symptom_what h2 {
	line-height: 1.3;
    margin-bottom: calc(90 * (100vw / 750));
}
#umou1806 .symptom_what h2 strong {
    font-size: calc(48 * (100vw / 750));
    font-weight: 600;
    letter-spacing: .1em;
}
#umou1806 .symptom_what p {
	font-weight: bold;
    text-align: left;
}
#umou1806 .symptom_what p span {
    background: linear-gradient(transparent 40%, #F8FF8075 40%);
}

/* その他にもおすすめの夏用の掛け布団があります！ */
.block-common-other {
	width: 100%;
	margin: auto;
	padding: calc(70 * (100vw / 750)) 0;
}

.block-common-other h2 {
    position: relative;
    display: table;
    font-size: calc(42 * (100vw / 750));
    font-weight: 600;
    color: #1090cf;
	text-align: center;
	margin: 0 auto calc(80 * (100vw / 750));
    padding: 0;
	border: none;
}
.block-common-other h2::before {
    position: absolute;
    left: calc(-55 * (100vw / 750));
    top: 5px;
    content: "";
    width: 3px;
    height: 90%;
    background: #63C3F3;
    border-radius: 3px;
    transform: rotate(-25deg);
}
.block-common-other h2::after {
    position: absolute;
    content: "";
    right: calc(-55 * (100vw / 750));
    top: 5px;
    width: 3px;
    height: 90%;
    background: #63C3F3;
    border-radius: 3px;
    transform: rotate(25deg);
}
.block-common-other h2 span {
    background: linear-gradient(transparent 30%, #F8FF80 30%);
}

.block-common-other--box:not(:first-of-type) {
	margin: calc(80 * (100vw / 750)) auto 0;
}
.block-common-other--box-inner {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	margin: 0 auto 0 calc(50 * (100vw / 750));
}
.block-common-other--box-inner img {
	width: calc(123 * (100vw / 750));
	flex-shrink: 0;
	margin: 0 calc(40 * (100vw / 750)) 0 0;
}

.block-common-other--box p {
	font-size: calc(36 * (100vw / 750));
	font-weight: bold;
	line-height: 1.5;
	margin: 0 0 calc(40 * (100vw / 750));
}

.block-common-other--box a.block-common-other--btn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: auto;
	width: calc(662 * (100vw / 750));
	height: calc(99 * (100vw / 750));
	font-size: calc(30 * (100vw / 750));
	font-weight: bold;
	text-align: center;
	color: #fff;
	line-height: 1;
	background: #1090cf;
	border-radius: 50px;
}
.block-common-other--box a.block-common-other--btn::after {
    position: absolute;
    top: 50%;
    right: 22px;
    width: 0.5em;
    height: 0.5em;
    transform: translateY(-50%) rotate(45deg);
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    content: "";
}
.block-common-other--box a.block-common-other--btn:hover {
	opacity: 0.8;
}
