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

/*---------------------------------
	index
---------------------------------*/
#topic #ttlBox {
    margin: 0 auto 40px;
    height: 150px;
    background: #b1c7dc;
}
#topic #ttlBox h1 {
    line-height: 150px;
    font-size: 3.4rem;
    color: #fff;
    text-align: center;
}
#topic #ttlBox h1 span {
    background: url(../img/about/logo.png) left 50% no-repeat;
    background-size: 240px auto;
    padding-left: 250px;
}
section h2 {
    font-size: 3.2rem;
    text-align: center;
}

@media (max-width: 480px) {
   #topic #ttlBox {
        height: 100px;
        margin: 0 auto 20px;
    }
    #topic #ttlBox h1 {
        line-height: 100px;
        font-size: 2.8rem;
        color: #fff;
        text-align: center;
    }
    #topic #ttlBox h1 span {
        background-size: 160px auto;
        padding-left: 160px;
    }
    section h2 {
        font-size: 2.4rem;
        line-height: 1.4;
				margin-bottom: 30px;
    }
}

.secWater {
    margin: 100px 0 80px;
    background: url(/lp01/img/water_bg01.png) center bottom 100px no-repeat;
}
.secWater .txtAreaTxt {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 2;
    margin: 40px 0 0;
    text-align: center;
}
@media (max-width: 480px) {
    .secWater {
        margin: 30px 0;
    }
    .secWater .txtAreaTxt {
        font-size: 1.4rem;
        line-height: 1.6;
        margin: 10px 0 0;
        text-align: left;
    }
}

.secCharacter {
    margin: 120px 0 100px;
}
.secCharacterTtl {
    font-size: 3.2rem;
    text-align: center;
    color: #80735e;
    background: url(../img/index/bg_productL.png) center top no-repeat;
    padding-top: 140px;
}
.secCharacterIn {
    background: url(../img/product/character_bg01.png) center bottom no-repeat;
		padding-bottom: 250px;
		background-size: 200px auto;
}
.secCharacter .txtAreaTxt {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 2;
    margin: 40px 0 0;
    text-align: center;
}
@media (max-width: 480px) {
    .secCharacter {
        margin: 40px 0 20px;
    }
    .secCharacterTtl {
        padding-top: 70px;
        font-size: 2.4rem;
        background-size: 50px auto;
    }
    .secCharacterIn {
        background: none;
        padding-bottom: 30px;
    }
    .secCharacter .txtAreaTxt {
        font-size: 1.4rem;
        line-height: 1.6;
        margin: 10px 0 0;
				text-align: left;
    }
}

.secHowto {
    margin: 160px 0 100px;
}
#topic h2.secHowtoTtl {
    font-size: 2.8rem;
}
#topic h2.secHowtoTtl span {
	font-size: 2.0rem;
}
.secHowtoIn {
}
.secHowtoIn .supportList {
	position: relative;
	z-index: 1;
	width: 760px;
	margin: 0 auto;
	padding: 60px 0 0;
}
.secHowtoIn .supportList li {
    width: 23%;
    margin: 0 1%;
}
.secHowtoIn .supportList li img {
	width: 100%;
}

.secHowtoIn .supportListTxt {
    padding-top: 15px;
    font-size: 15px;
    padding-left: 7px;
    margin-right: -10px;
    line-height: 1.3;
    font-weight: 600;
}
@media (max-width: 780px) {
    .secHowtoIn .supportList {
        width: 100%;
    }
}
@media (max-width: 480px) {
    .secHowto {
        margin: 0 0 60px;
    }
    #topic h2.secHowtoTtl {
        font-size: 1.8rem;
        text-align: left;
        margin: 0 10px;
    }
		#topic h2.secHowtoTtl span {
        font-size: 1.6rem;
        text-align: left;
        margin: 0 10px;
    }
    .secHowtoIn .supportList {
        padding-top: 20px;
        display: block;
    }
    .secHowtoIn .supportList li {
    width: 60%;
    margin: 0 auto 20px;
    }
}

#topic .productsList {
    margin-bottom: 100px;
}
#topic .productsList li {
    width: 46%;
}
#topic .productsList li.plane {
    margin-right: 8%;
}
#topic .productsList .text {
    font-family: '游ゴシック',YuGothic,'Yu Gothic','Yu Gothic UI','Meiryo UI','ヒラギノ角ゴシック','Hiragino Sans','Arial','Helvetica',sans-serif;
    font-size: 2.4rem;
    text-align: center;
    font-weight: 600;
    margin-bottom: 20px;
}
#topic .productsList .note {
    margin: 10px 0;
    font-weight: 600;
}
#topic .productsList .sweet .text {
    color: #e8979b;
}
#topic .productsList .btn {
    margin: 0 auto;
    border-radius: 10px;
    width: 280px;
}
#topic .productsList .btn a {
    display: block;
    font-family: '游ゴシック',YuGothic,'Yu Gothic','Yu Gothic UI','Meiryo UI','ヒラギノ角ゴシック','Hiragino Sans','Arial','Helvetica',sans-serif;
    color: #fff;
    font-size: 2.4rem;
    text-align: center;
    font-weight: 600;
    padding: 10px 16px;
    margin-top: 20px;    
}
#topic .productsList li dl {
    font-weight: 600;
}
#topic .productsList li.salt  {
    width: 100%;
}
#topic .productsList li.salt figure  {
    text-align: center;
    margin-bottom: 30px;
}
#topic .productsList li.salt figure img  {
    width: 200px;
}

#topic .productsList .salt .btn {
    background: #71acbe;
}
#topic .productsList .plane .btn {
    background: #917c65;
}
#topic .productsList .sweet .btn {
    background: #e8979b;
}
@media (max-width: 480px) {
    #topic .productsList {
        margin-bottom: 60px;
    }
    #topic .productsList li {
        width: 50%;
    }
    #topic .productsList li.plane {
        margin-right: 20px;
    }
    #topic .productsList .text {
        font-size: 1.4rem;
        padding-left: 0;
        margin-bottom: 10px;
    }
    #topic .productsList .note {
        margin-bottom: 10px;
    }
    #topic .productsList dl {
        font-size: 1.2rem;
    }
    #topic .productsList .btn {
        margin-left: 0;
        border-radius: 6px;
        width: 100%;
    }
    #topic .productsList .btn a {
        font-size: 1.8rem;
        padding: 8px;
        margin-top: 20px;    
    }
    #topic .productsList li.salt figure  {
        margin-bottom: 20px;
    }
    #topic .productsList li.salt figure img  {
        width: 140px;
    }
    #topic .productsList li.salt .btn {
        width: 70%;
        margin: 0 auto;
    }
}