﻿/* 2018.06 フリーページ　umou1806 */
/* 共通 */
#umou1806 {
    margin-bottom: 90px;
}
#umou1806 p {
    line-height: 1.9;
    font-weight: 200;
}
#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 {
    min-height: 600px;
    background: url(/ec/img/event/umou1806/umou1806_recommend_bg.jpg) no-repeat;
    display: flex;
    margin-bottom: 80px;
    position: relative;
    background-size: 50%;
    z-index: 0;
}
div#umou1806_mv::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(/ec/img/event/umou1806/umou2008_mv_bg_02.png) no-repeat;
    z-index: -1;
    background-position: right;
    background-size: 90%;
}
#umou1806_mv h1 {
    margin: auto 20% auto auto;
    padding-bottom: 32px;
}
.anchor-link-area {
    width: 840px;
    margin: auto;
}
.anchor-link-area .inner-box {
    position: relative;
    background: url(/ec/img/event/umou1806/umou2008_link_bg.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
}
.anchor-link-area .text-box .is-cool {
    position: relative;
    z-index: 0;
}
.anchor-link-area .text-box .is-cool::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 71%;
    height: 10px;
    background: #cfe9f5;
    z-index: -1;
}
.anchor-link-area .text-box a {
    color: #fff;
    background: #1090cf;
    font-size: 18px;
    text-align: center;
    display: block;
    font-weight: 100;
    border-radius: 50px;
    margin-top: 10px;
    padding: 12px;
    position: relative;
    transition: .2s all;
}
/*.anchor-link-area .text-box a::after {
    content: "▼";
    margin-left: 10px;
    font-size: 15px;
    display: inline-block;
    position: absolute;
    top: 14px;
}*/
.anchor-link-area .text-box 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: 34px;
    margin-bottom: 60px;
    font-weight: 500;
}
#umou1806_symptom h2 strong,
.umou1806-item-list-ttl strong {
    font-size: 40px;
    letter-spacing: -2px;
    font-weight: 600;
    letter-spacing: .1em;
}
#umou1806_symptom .anchor-link-area h2 {
    font-size: 40px;
}
#umou1806_symptom .anchor-link-area h2 strong {
    font-size: 54px;
    font-weight: 500;
}
#umou1806 section {
    width: 1000px;
    margin: 85px auto 0;
}
/* こんな症状に悩まされていませんか？ */
#umou1806_symptom .symptom_check {
    margin-bottom: 85px;
    padding-bottom: 240px;
    background: url(/ec/img/event/umou1806/umou2008_symptom_all.png) no-repeat;
    background-position: center bottom;
}
#umou1806_symptom .symptom_check ul {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    padding: 0 0 0 75px;
}
#umou1806_symptom .symptom_check ul li {
    width: calc(100% / 4);
    font-size: 18px;
    color: #555;
    line-height: 2.5;
    letter-spacing: 1px;
    background: url(/ec/img/event/umou1806/umou1806_symptom_mark.png) no-repeat;
    background-position: 0 12px;
    padding-left: 28px;
    white-space: nowrap;
}
#umou1806_symptom .symptom_text {
    letter-spacing: 0.04rem;
    padding-top: 35px;
}
#umou1806_symptom .symptom_about {
    background: #f1f6fa;
    margin-bottom: 235px;
    padding: 50px 30px 30px;
    position: relative;
}
#umou1806_symptom .symptom_about h2 {
    margin-bottom: 40px;
}
#umou1806_symptom .symptom_about .inner-box {
    background: #fff;
    border-radius: 20px;
    padding: 50px 0 30px 80px;
    display: flex;
}
#umou1806_symptom .symptom_about .inner-box p {
    width: calc(100% - 438px);
    margin-right: auto;
}
#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: 438px;
    background-size: contain;
}
#umou1806_symptom .is-allow {
    font-size: 30px;
    background: url(/ec/img/event/umou1806/umou2008_symptom_arrow_bg.png) no-repeat;
    background-position: center;
    position: absolute;
    bottom: -230px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    height: 207px;
    padding-top: 64px;
}
/* 上質な眠りには、天然の羽毛が理想的 */
#umou1806_about h2 {
    margin-bottom: 30px;
}
#umou1806_about .is-read {
    text-align: center;
    margin-bottom: 50px;
}

#umou1806_about .about_list {
    display: flex;
    justify-content: space-between;
}

#umou1806_about .about_list li {
    width: calc((100% - 80px) / 3);
    text-align: center;
}

#umou1806_about .about_list .tit {
    font-size: 24px;
    margin: 0 8% 10px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 57px 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: 30px 0 50px;
}
#umou1806_why h2 {
    text-align: center;
    margin-bottom: 50px;
    background: #fdaba6;
    background: -moz-linear-gradient(left, #f9efe8 0%, #fdaba6 50%, #f9efe8 100%);
    background: -webkit-linear-gradient(left, #f9efe8 0%, #fdaba6 50%, #f9efe8 100%);
    background: linear-gradient(to right, #f9efe8 0%, #fdaba6 30%, #fdaba6 50%, #fdaba6 70%, #f9efe8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f6fa', endColorstr='#f1f6fa', GradientType=1);
    color: #fff;
    padding: 10px 0;
    font-weight: 200;
}
#umou1806_why ul {
    padding: 0 50px;
}
#umou1806_why li {
    display: flex;
    margin-bottom: 50px;
}
#umou1806_why li figure {
    width: 423px;
}
#umou1806_why li:nth-child(2n) figure {
    order: 1;
}
#umou1806_why h3 {
    font-size: 26px;
    margin-bottom: 25px;
}
#umou1806_why .inner-box {
    width: calc(100% - 423px);
    margin-left: 50px;
}
#umou1806_why li:nth-child(2n) .inner-box {
    margin-left: 0;
    margin-right: 50px;
}
#umou1806_why li:last-child {
    margin-bottom: 0;
}
#umou1806_why .is-num {
    vertical-align: middle;
    margin-right: 10px;
}
/* 実はオールシーズン使えます！ */
#umou1806_season h2 {
    margin-bottom: 30px;
}
#umou1806_season .is-read {
    text-align: center;
    margin-bottom: 50px;
}
.is_season_list li {
    display: flex;
    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-left: 30px;
    width: calc(100% - 550px);
}
.is_season_list figure {
    width: 400px;
}
.is_season_list .season_name {
    font-size: 34px;
    margin-bottom: 30px;
}
.is_season_list .season_name .is-small {
    font-size: 16px;
}
.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;
}
@media screen and (max-width: 1500px) {
    #umou1806_mv {
        background-size: auto;
    }
        div#umou1806_mv::before {
        background-size: auto;
    }
        #umou1806_mv h1 {
        margin: auto 15% auto auto;
    }
}
@media screen and (min-width: 1500px) {
    #umou1806_mv {
        position: relative;
    }
        #umou1806_mv h1 {
        position: absolute;
        top: 50%;
        left: calc(50% + 180px);
        transform: translate(-50%, -50%);
        margin: auto;
    }
}
/* 商品一覧見出し */
.umou1806-item-list-ttl span {
    position: relative;
    display: inline-block;
    z-index: 0;
}
.umou1806-item-list-ttl span::before,
.umou1806-item-list-ttl span::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: -1;
}
.umou1806-item-list-ttl span::before {
    width: 239px;
    height: 109px;
    background: url(/ec/img/event/umou1806/umou2008_ttl_bg_01.png) no-repeat;
    left: -210px;
}
.umou1806-item-list-ttl span::after {
    width: 297px;
    height: 180px;
    background: url(/ec/img/event/umou1806/umou2008_ttl_bg_02.png) no-repeat;
    right: -210px;
}

/* ダウンケット・羽毛掛け布団とは */
.symptom_what {
	width: 1000px;
    margin: 0 auto 85px;
    padding: 40px 30px;
	text-align: center;
    background: #f1f6fa url(/ec/img/event/umou1806/what_bg.png) no-repeat top 25px center;
}
#umou1806 .symptom_what h2 {
    margin-bottom: 20px;
}
#umou1806 .symptom_what h2 strong {
    font-size: 34px;
    font-weight: 600;
    letter-spacing: .1em;
}
#umou1806 .symptom_what p span {
    background: linear-gradient(transparent 40%, #F8FF8075 40%);
}

/* その他にもおすすめの夏用の掛け布団があります！ */
.block-common-other {
	width: 100%;
	max-width: 850px;
	margin: 100px auto;
}

.block-common-other h2 {
    position: relative;
    display: table;
    font-size: 32px;
    font-weight: 600;
    color: #1090cf;
	text-align: center;
	margin: 40px auto 60px;
    padding: 0;
	border: none;
}
.block-common-other h2::before {
    position: absolute;
    left: -25px;
    top: 5px;
    content: "";
    width: 4px;
    height: 100%;
    background: #63C3F3;
    border-radius: 3px;
    transform: rotate(-25deg);
}
.block-common-other h2::after {
    position: absolute;
    content: "";
    right: -25px;
    top: 5px;
    width: 4px;
    height: 100%;
    background: #63C3F3;
    border-radius: 3px;
    transform: rotate(25deg);
}
.block-common-other h2 span {
    background: linear-gradient(transparent 30%, #F8FF80 30%);
}

.block-common-other--box {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	margin: auto;
}
.block-common-other--box img {
	width: 123px;
	flex-shrink: 0;
	margin: 0 20px 0 0;
}
.block-common-other--box:not(:first-of-type) {
	margin: 60px auto 0;
}

.block-common-other--box p {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	line-height: 1.3;
	margin: 0 0 23px;
}

.block-common-other--box a.block-common-other--btn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: auto;
	width: 400px;
	height: 51px;
	font-size: 18px;
	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;
}
