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


#conWrap {
    
}

#conWrap .bg_list {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
#conWrap .bg_list::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.36);
    position: absolute;
    top: 0;
    left: 0;
}


/* #message_top
----------------------------------------- */
#message_top {
    background: url("../images/message_top.jpg") no-repeat center bottom;
    background-size: cover;
    position: relative;
    z-index: 1;
}
#product_top::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.36);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

#message_top .inner {
    padding-top: 26rem;
    padding-bottom: 12rem;
}
 
@media only screen and (max-width: 768px) {
#message_top {
}
#message_top .inner {
    padding-top: 14rem;
    padding-bottom: 6rem;
}
    
#message_top h1.con_ttl.col_w span.en img {
    width: 13.8rem;
}
}


/* .message_con
----------------------------------------- */
.message_con {
    position: relative;
    z-index: 1;
    color: #FFFFFF;
}

.message_con .inner {
    max-width: 98rem;
    padding-top: 6rem;
    padding-bottom: 13rem;
}

.message_con .message_con_list > li:not(:last-child) {
    margin-bottom: 10rem;
}

.message_con .message_layout {
    color: #FFFFFF;
    margin-bottom: 6rem;
}

.message_con .message_layout li.img {
    width: -webkit-calc(400 / 980 * 100%);
    width: calc(400 / 980 * 100%);
}
.message_con .message_layout li.txt {
    width: -webkit-calc(530 / 980 * 100%);
    width: calc(530 / 980 * 100%);
}

.message_con .message_layout .img_wrap {
    margin: auto;
}

.message_con h2 {
    margin-bottom: 6rem;
}
.message_con h2 span {
    display: inline-block;
    background-color: rgba(0,0,0,0.40);
    padding: 4rem;
    border-radius: 20rem;
    font-size: 3.0rem;
    line-height: calc(53/30);
}
.message_con h2.f_right {
    display: flex;
    justify-content: flex-end;
}

.message_con .txt_wrap {
    font-size: 2.2rem;
    line-height: calc(56/26);
}

.message_con .img_layout {
    width: 100%;
    max-width: 52rem;
    float: right;
    padding-left: 12rem;
    padding-bottom: 6rem;
}
.message_con .img_layout > li:not(:last-child) {
    margin-bottom: 6rem;
}


.message_con .btn_wrap {
    width: 100%;
    max-width: 78rem;
    margin: auto;
    margin-top: 20rem;
    position: relative;
}
.message_con .btn_wrap .btn {
    width: 100%;
}
.message_con .btn_wrap .btn::before {
    background-color: #ffff00;
}
.message_con .btn_wrap .btn:hover::before {
    background-color: #000000;
}
.message_con .btn_wrap .btn span {
    color: #000000;
}
.message_con .btn_wrap .btn:hover span {
    color: #FFFFFF;
}
.message_con .btn_wrap .illust {
    position: absolute;
    top: -2rem;
    left: -3rem;
    transform: translate(0,-100%);
}

 
@media only screen and (max-width: 768px) {
.message_con {
}
.message_con .inner {
    padding-top: 3rem;
    padding-bottom: 6rem;
}

.message_con .message_con_list > li:not(:last-child) {
    margin-bottom: 5rem;
}
    
.message_con .message_layout {
    width: 100%;
    margin-bottom: 4rem;
}
.message_con .message_layout li.txt {
    width: 100%;
    margin-top: 3rem;
}
.message_con .message_layout li.img {
    width: 100%;
}
.message_con .message_layout .img_wrap {
    width: 28rem;
    margin: auto;
}

.message_con .message_layout .txt_wrap {
    font-size: 1.4rem;
    line-height: calc(32/18);
}
    
.message_con .btn_wrap {
    margin-top: 4rem;
}
.message_con .btn_wrap .btn {
    width: auto;
}
    
.message_con h2 {
    margin-bottom: 3rem;
}
.message_con h2 span {
    padding: 1.5rem;
    border-radius: 3rem;
    font-size: 1.4rem;
}
.message_con h2.f_right {
    justify-content: flex-start;
}

.message_con .txt_wrap {
    font-size: 1.4rem;
}

.message_con .img_layout {
    width: 45%;
    /*float: none;*/
    padding-left: 2rem;
    padding-bottom: 3rem;
}
.message_con .img_layout > li:not(:last-child) {
    margin-bottom: 3rem;
}
.message_con .btn_wrap .illust {
    position: absolute;
    top: -2rem;
    left: -1rem;
    transform: translate(0,-100%);
    width: 14rem;
}
}


/* #message_con_1
----------------------------------------- */
#message_con_1 {
    background: url("../images/message_bg01.jpg") repeat-y center top;
    background-size: cover;
    position: relative;
    z-index: 1;
}
#message_con_1::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.36);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

#message_con_1 .inner {
    max-width: 98rem;
    padding-top: 6rem;
    padding-bottom: 13rem;
}

 
@media only screen and (max-width: 768px) {
#message_con_1 {
}
#message_con_1 .inner {
    padding-top: 3rem;
    padding-bottom: 6rem;
}
}


/* #message_con_2
----------------------------------------- */
#message_con_2 {
    background: url("../images/message_bg03.jpg") repeat-y center bottom;
    background-size: cover;
    position: relative;
    z-index: 1;
}
#message_con_2::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.36);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

#message_con_2 .inner {
    max-width: 98rem;
    padding-top: 6rem;
    padding-bottom: 13rem;
}

 
@media only screen and (max-width: 768px) {
#message_con_2 {
}
#message_con_2 .inner {
    padding-top: 3rem;
    padding-bottom: 6rem;
}
}


/* #more
----------------------------------------- */
#more {
    background: url("../images/message_bg04.jpg") repeat-y center bottom;
    background-size: cover;
    position: relative;
    z-index: 1;
}
#more::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.36);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

#more .inner {
    padding-top: 12rem;
    padding-bottom: 12rem;
}

#more h1 {
    margin-bottom: 4rem;
}

#more .more_wrap {
    padding-top: 36rem;
}

#more .more_layout {
    color: #FFFFFF;
    align-items: center;
}
#more .more_layout li.img {
    width: -webkit-calc(250 / 1200 * 100%);
    width: calc(250 / 1200 * 100%);
}

#more .more_layout li.txt {
    width: -webkit-calc(900 / 1200 * 100%);
    width: calc(900 / 1200 * 100%);
}

#more .more_layout .img_wrap {
    margin: auto;
}

#more .more_layout .txt_wrap {
    font-size: 2.2rem;
    line-height: calc(46/26);
    margin-bottom: 4rem;
}

#more .sns_list {
    align-items: center;
    justify-content: center;
    gap: 4rem 8rem;
}

#more .sns_list > li {
    width: 6rem;
}

 
@media only screen and (max-width: 768px) {
#more {
    background: url(../images/message_bg04.jpg) repeat-y center top;
    background-size: 280%;
    position: relative;
    z-index: 1;
}
#more .inner {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

#more .more_wrap {
    padding-top: 8rem;
}

#more h1 {
    margin-bottom: 2rem;
}
    
#more .more_layout {
    width: 100%;
}
#more .more_layout li.txt {
    width: 100%;
    margin-top: 3rem;
}
#more .more_layout li.img {
    width: 100%;
}
#more .more_layout .img_wrap {
    width: 28rem;
    margin: auto;
}

#more .more_layout .txt_wrap {
    font-size: 1.4rem;
    line-height: calc(32/18);
}
    
#more .sns_list {
    align-items: center;
    justify-content: center;
    gap: 2rem 3rem;
}
#more .sns_list > li {
    width: 4rem;
}
    
#more .btn_wrap {
    margin-top: 12rem;
}
#more .btn_wrap .btn {
    width: auto;
}
}