@charset "UTF-8";
/*--------------------------------------------------
common
--------------------------------------------------*/
#livlonNewsletterContents { width: 100%; overflow: hidden; font-size: 16px; line-height: 2; }
#livlonNewsletterContents img { width: auto; height: auto; }
#livlonNewsletterContents .floatL { float: left; }
#livlonNewsletterContents .floatR { float: right; }
#livlonNewsletterContents br.pc { display: inline; }
#livlonNewsletterContents br.mb { display: none; }
@media screen and (max-width: 751px) {
#livlonNewsletterContents br.pc { display: none; }
#livlonNewsletterContents br.mb { display: inline; }
}
#livlonNewsletterContents sub { font-size: 0.8em; vertical-align: baseline; }
/*==================================================
header
==================================================*/
#livlonNewsletterContents #kurashic_header { width: auto; margin: 0 auto 37px; overflow: hidden;
text-align: center; }
#livlonNewsletterContents #kurashic_header .title { background: url(../images/header_img01.jpg) center top no-repeat; overflow: hidden; }
#livlonNewsletterContents #kurashic_header .title .inner { width: 900px; height: 450px; margin: 0 auto; position: relative; }
#livlonNewsletterContents #kurashic_header .title h1 { padding-top: 38px; position: relative; }
#livlonNewsletterContents #kurashic_header .title h1 img { mix-blend-mode: multiply; }
#livlonNewsletterContents #kurashic_header .title h1:after { content: ""; display: block; width: 496px; height: 450px;
position: absolute; top: 38px; left: 0; right: 0; margin: 0 auto;
background: url(../images/header_title01.png) center top no-repeat; mix-blend-mode: screen; }
#livlonNewsletterContents #kurashic_header .title h1 small { display: none; }
#livlonNewsletterContents #kurashic_header .title .ex { width: 400px; height: 400px;
position: absolute; top: 20px; right: -185px; }
#livlonNewsletterContents #kurashic_header .title .ex .txt { display: none; }
#livlonNewsletterContents #kurashic_header .theme { width: 900px; margin: -20px auto 0; }
#livlonNewsletterContents #kurashic_header .theme h2 { margin: -5px 0 20px; }
#livlonNewsletterContents #kurashic_header .theme p { text-align: center; }
#livlonNewsletterContents #kurashic_header .theme .copy { min-height: 180px; margin: 0 auto; padding: 32px;
background: url(../images/header_copy_bg.png) center top no-repeat; }
#livlonNewsletterContents #kurashic_header .theme .copy span { display: inline-block;
font-size: 137.5%; line-height: 1.82; }
#livlonNewsletterContents #kurashic_header .theme .copy span ruby { font-size: 100%; margin: 0 -0.2em; vertical-align: 95%; }
/*-------------------------
animation
-------------------------*/
#livlonNewsletterContents .jello-horizontal {
-webkit-animation: jello-horizontal 10s 3s infinite both;
animation: jello-horizontal 10s 3s infinite both;
}
@-webkit-keyframes jello-horizontal {
0% { -webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); }
3% { -webkit-transform: scale3d(1.15, 0.95, 1);
transform: scale3d(1.15, 0.95, 1); }
4% { -webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1); }
5% { -webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1); }
6% { -webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1); }
7% { -webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1); }
8% { -webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1); }
9% { -webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1); }
10% { -webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); }
100% { -webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); }
}
@keyframes jello-horizontal {
0% { -webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); }
3% { -webkit-transform: scale3d(1.15, 0.95, 1);
transform: scale3d(1.15, 0.95, 1); }
4% { -webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1); }
5% { -webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1); }
6% { -webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1); }
7% { -webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1); }
8% { -webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1); }
9% { -webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1); }
10% { -webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); }
100% { -webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1); }
}
@media screen and (max-width: 1025px) {
#livlonNewsletterContents #kurashic_header .title .ex { right: -135px; }
#livlonNewsletterContents #kurashic_header .title .caption { right: -55px; }
}
@media screen and (max-width: 751px) {
#livlonNewsletterContents #kurashic_header { margin: 0 auto 50px; }
#livlonNewsletterContents #kurashic_header .title { background-image: url(../images/header_img01_mb.jpg); }
#livlonNewsletterContents #kurashic_header .title .inner { width: 100%; height: auto; }
#livlonNewsletterContents #kurashic_header .title h1 { padding-top: 0px; }
#livlonNewsletterContents #kurashic_header .title h1:after { width: 90%; max-width: 496px; height: 0; padding: 0 0 61.29%;
top: 0; background-size: contain; }
#livlonNewsletterContents #kurashic_header .title h1 .title01 { width: 90%; max-width: 496px; }
#livlonNewsletterContents #kurashic_header .title .ex { width: 100%; max-width: 400px; height: auto; margin: -30px auto 0;
position: relative; top: auto; right: auto; }
#livlonNewsletterContents #kurashic_header .title .ex img { width: 100%; }
#livlonNewsletterContents #kurashic_header .theme { width: 100%; background: url(../images/header_line01.png) center bottom no-repeat; }
#livlonNewsletterContents #kurashic_header .theme .theme01 { width: 90%; max-width: 362px; }
#livlonNewsletterContents #kurashic_header .theme .theme02 { width: 90%; }
#livlonNewsletterContents #kurashic_header .theme .copy { background: url(../images/header_line01.png) center top no-repeat; }
#livlonNewsletterContents #kurashic_header .theme .copy span { display: inline-block; white-space: nowrap; }
}
/*************************
mobile header space
*************************/
@media screen and (max-width: 751px) {
#livlonNewsletterContents #kurashic_header { padding-top: 18vw; }
}
/*==================================================
chapter01
==================================================*/
#livlonNewsletterContents #kurashic_ch01 { width: 900px; margin: 0 auto; }
#livlonNewsletterContents #kurashic_ch01 .block { overflow: hidden; }
#livlonNewsletterContents #kurashic_ch01 .block01 { margin-bottom: 30px; }
#livlonNewsletterContents #kurashic_ch01 .block01 .title01 { display: none; }
#livlonNewsletterContents #kurashic_ch01 .block01 .img01 {}
#livlonNewsletterContents #kurashic_ch01 .block01 .copy { width: auto; margin: -60px 0 0; padding: 0 0 45px 170px;
background: url(../images/ch01_bg01.jpg) right bottom no-repeat; }
#livlonNewsletterContents #kurashic_ch01 .block02 { margin-bottom: 40px; padding-bottom: 100px;
background: url(../images/ch01_bg02.jpg) right bottom no-repeat; }
#livlonNewsletterContents #kurashic_ch01 .block02 .floatL { width: 500px; margin-bottom: 15px; }
#livlonNewsletterContents #kurashic_ch01 .block02 .floatR { width: 370px; }
#livlonNewsletterContents #kurashic_ch01 .block02 .floatR .title01 { margin-bottom: 10px; }
#livlonNewsletterContents #kurashic_ch01 .block02 dl { clear: both; width: 820px; margin-bottom: 30px; }
#livlonNewsletterContents #kurashic_ch01 .block02 dl dt { font-size: 150%; margin-bottom: -10px; }
#livlonNewsletterContents #kurashic_ch01 .block02 dl dt span { font-size: 100%; color: #aecd73; }
#livlonNewsletterContents #kurashic_ch01 .block02 dl dd { margin-bottom: 5px; margin-bottom: 10px; }
#livlonNewsletterContents #kurashic_ch01 .block02 .point { width: 820px; padding: 25px 30px; border: solid 1px #aecd73; border-radius: 10px; }
#livlonNewsletterContents #kurashic_ch01 .block02 .point p { margin: 0; }
#livlonNewsletterContents #kurashic_ch01 .block03 { margin-bottom: 5px; }
#livlonNewsletterContents #kurashic_ch01 .block03 .floatL { width: 420px; padding-top: 45px;
background: url(../images/ch01_bg03.png) left top no-repeat; }
#livlonNewsletterContents #kurashic_ch01 .block03 .floatL .title02 { margin-bottom: 30px; }
#livlonNewsletterContents #kurashic_ch01 .block03 .btm { clear: both; }
#livlonNewsletterContents #kurashic_ch01 .block04 { height: 500px; position: relative;
background: url(../images/ch01_bg04.jpg) center top no-repeat; }
#livlonNewsletterContents #kurashic_ch01 .block04 .title { display: none; }
#livlonNewsletterContents #kurashic_ch01 .block04 p { margin: 170px 40px 0 490px; }
#livlonNewsletterContents #kurashic_ch01 .block04 .photo { position: absolute; top: 20px; left: 0; }
@media screen and (max-width: 751px) {
#livlonNewsletterContents #kurashic_ch01 { width: auto; }
#livlonNewsletterContents #kurashic_ch01 .block01 { overflow: hidden; }
#livlonNewsletterContents #kurashic_ch01 .block01 .title01 { width: 30%; max-width: 150px; float: left; margin: 0 15px;
position: relative; left: auto; top: auto; }
#livlonNewsletterContents #kurashic_ch01 .block01 .img01 { width: 120%; max-width: 900px; margin: 0 0 0 10px; }
#livlonNewsletterContents #kurashic_ch01 .block01 .copy { width: auto; margin: 0; padding: 0 5% 50px; background-size: 130%; }
#livlonNewsletterContents #kurashic_ch01 .block .txt { float: none; width: auto; margin: 0 20px 5px; }
#livlonNewsletterContents #kurashic_ch01 .block .txt h3 img { width: 100%; max-width: 420px; }
#livlonNewsletterContents #kurashic_ch01 .block .photo { float: none; display: block; width: 90%; max-width: 450px; margin: 0 auto 20px; }
#livlonNewsletterContents #kurashic_ch01 .block02 { background-size: 130%; padding-bottom: 60px; }
#livlonNewsletterContents #kurashic_ch01 .block02 dl { width: auto; margin: 0 11% 20px 5%; }
#livlonNewsletterContents #kurashic_ch01 .block02 .point { width: auto; margin: 0 11% 30px 5%; }
#livlonNewsletterContents #kurashic_ch01 .block02 .floatR .title01 { width: 80%; max-width: 370px; }
#livlonNewsletterContents #kurashic_ch01 .block03 .floatL { padding-top: 30px; }
#livlonNewsletterContents #kurashic_ch01 .block03 .floatL .title02 { width: 80%; max-width: 420px; margin-bottom: 20px; }
#livlonNewsletterContents #kurashic_ch01 .block04 { height: auto; padding-bottom: 60px;
background: url(../images/ch01_title04.jpg) center top no-repeat; }
#livlonNewsletterContents #kurashic_ch01 .block04:after { content: ""; display: block; width: 100%; height: 10px; margin-top: -20px;
background: url(../images/ch01_bg05.jpg) center top no-repeat; }
#livlonNewsletterContents #kurashic_ch01 .block04 p { margin: 110px 5% 0; }
#livlonNewsletterContents #kurashic_ch01 .block04 .photo { position: relative; width: 100%; max-width: 464px; margin: -40px auto 0; }
}
/*==================================================
chapter02
==================================================*/
#livlonNewsletterContents #kurashic_ch02 { width: 900px; height: 582px; margin: 0 auto 55px; padding-top: 105px;
text-align: center;
background: url(../images/ch02_bg01.jpg) center top no-repeat; }
#livlonNewsletterContents #kurashic_ch02 h2 { display: none; }
#livlonNewsletterContents #kurashic_ch02 .box { width: 600px; margin: 0 auto; overflow: hidden; }
#livlonNewsletterContents #kurashic_ch02 .box p { display: none; }
#livlonNewsletterContents #kurashic_ch02 .box .floatR { width: 420px; height: 180px; text-indent: -99999px; }
#livlonNewsletterContents #kurashic_ch02 .box01 .floatR { background: url(../images/ch02_img02.png) 0 0 no-repeat; }
#livlonNewsletterContents #kurashic_ch02 .box02 .floatR { background: url(../images/ch02_img04.png) 0 0 no-repeat; }
#livlonNewsletterContents #kurashic_ch02 .box01 { margin-bottom: 30px; }
@media screen and (max-width: 751px) {
#livlonNewsletterContents #kurashic_ch02 { width: 100%; height: auto; margin: 0 auto 50px; padding-top: 120px;
background: url(../images/ch02_bg02.jpg) center top no-repeat #fffbf8; }
#livlonNewsletterContents #kurashic_ch02 .box { width: auto; margin: 0; }
#livlonNewsletterContents #kurashic_ch02 .box img { width: 100%; max-width: 180px; margin-bottom: 10px; }
#livlonNewsletterContents #kurashic_ch02 .box .floatL,
#livlonNewsletterContents #kurashic_ch02 .box .floatR { float: none; }
#livlonNewsletterContents #kurashic_ch02 .box .floatR { width: 90%; max-width: 400px; height: 120px;
margin: 0 auto; text-indent: -99999px; }
#livlonNewsletterContents #kurashic_ch02 .box01 .floatR { background: url(../images/ch02_img02m.png) 0 0 no-repeat; background-size: 100%; }
#livlonNewsletterContents #kurashic_ch02 .box02 .floatR { background: url(../images/ch02_img04m.png) 0 0 no-repeat; background-size: 100%; }
#livlonNewsletterContents #kurashic_ch02 .box01 { margin-bottom: 20px; }
#livlonNewsletterContents #kurashic_ch02 .box02 { background: url(../images/ch02_bg03.jpg) center bottom no-repeat; padding-bottom: 100px; }
}
/*==================================================
chapter03
==================================================*/
#livlonNewsletterContents #kurashic_ch03 { width: 900px; margin: 0 auto; padding: 12px;
background: url(../images/ch03_bg01.jpg) center top repeat-y; }
#livlonNewsletterContents #kurashic_ch03 .inner { padding: 38px 38px 26px; overflow: hidden; background-color: #fff; }
#livlonNewsletterContents #kurashic_ch03 .floatL { width: 370px; }
#livlonNewsletterContents #kurashic_ch03 .floatL h2 { padding: 55px 0 32px; }
#livlonNewsletterContents #kurashic_ch03 .floatL h2 small { display: none; }
#livlonNewsletterContents #kurashic_ch03 .floatL p { margin-bottom: 0; }
@media screen and (max-width: 751px) {
#livlonNewsletterContents #kurashic_ch03 { width: auto; }
#livlonNewsletterContents #kurashic_ch03 .inner { padding: 18px; }
#livlonNewsletterContents #kurashic_ch03 .floatL { float: none; width: auto; margin-bottom: 20px; }
#livlonNewsletterContents #kurashic_ch03 .floatR { float: none; display: block; width: 90%; max-width: 400px; margin: 0 auto; }
#livlonNewsletterContents #kurashic_ch03 .floatL h2 { padding: 20px 0; }
#livlonNewsletterContents #kurashic_ch03 .floatL .title01,
#livlonNewsletterContents #kurashic_ch03 .floatL .title02 { width: 100%; max-width: 370px; }
}
/*==================================================
bnr
==================================================*/
#livlonNewsletterContents #kurashic_bnr { text-align: center; }
#livlonNewsletterContents #kurashic_bnr a { display: block; width: 728px; height: 90px; margin: 80px auto;
background: url(../images/bnr_kagoshima_pc.png) 0 0 no-repeat; text-indent: -99999px; }
@media screen and (max-width: 751px) {
#livlonNewsletterContents #kurashic_bnr a { width: 90%; max-width: 320px; height: 100px; margin: 50px auto;
background-image: url(../images/bnr_kagoshima_mb.png); background-size: 100%; }
}
/*==================================================
footer
==================================================*/
#livlonNewsletterContents #kurashic_footer { padding: 40px 0;
background: url(../images/footer_bg01.jpg) center top repeat; }
#livlonNewsletterContents #kurashic_footer .inner { width: 900px; margin: 0 auto; position: relative; }
#livlonNewsletterContents #kurashic_footer h3 { width: 100px; height: 100px;
position: absolute; top: 20px; left: 20px; }
#livlonNewsletterContents #kurashic_footer .txt { height: 140px; margin: 0 20px 0 70px; padding: 20px 0 0 70px;
background-color: #fff; }
#livlonNewsletterContents #kurashic_footer p { display: none; }
#livlonNewsletterContents #kurashic_footer .img03 { position: absolute; top: -36px; right: 28px; }
@media screen and (max-width: 751px) {
#livlonNewsletterContents #kurashic_footer .inner { width: 90%; background-color: #fff; }
#livlonNewsletterContents #kurashic_footer h3 { width: auto; height: auto; text-align: center; padding: 20px 0 10px;
position: relative; left: auto; top: auto; }
#livlonNewsletterContents #kurashic_footer .txt { height: auto; margin: 0; padding: 0; text-align: center; }
#livlonNewsletterContents #kurashic_footer .txt img { width: 90%; max-width: 380px; }
#livlonNewsletterContents #kurashic_footer .img03 { display: block; width: 100%; max-width: 356px; margin: 0 auto;
position: relative; right: auto; top: auto; }
}