@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&display=swap');
@charset "UTF-8";
/*----------------------
* 1. GENERAL
* 1.1 Grids
* 1.2 Margin
* 1.3 Text
* 1.4 Titles and Subtitles
* 1.5 Tables
* 1.6 Buttons
* 1.7 Lists
* 1.8 Other Elements
* 1.8.1 plugins
* 1.8.2 page top
* 2. HEADER
* 2.1 Main Nav
* 2.1.1 main-nav-xs (sp-only)
* 2.1.2 sns Icon
* 3. MAIN VISUAL
* 3.1 Main Slider
* 4. TOP PAGE
* 4.1 Guide
* 4.2 News & Banner
* 4.2.1 news
* 4.2.2 banner
* 4.3 Juken table
* 4.4 Insta list
* 4.5 Entry list è¿½åŠ 230125
* 4.6 About / Book / Topics / Voice è¿½åŠ 230629
* 5. CONTENTS
* 5.1 Box
* 5.2 Cate Title
* 5.3 About
* 5.4 Voice
* 5.5 Benefits
* 5.5.1 20th è¿½åŠ 211209
* 6. FOOTER
* 7. NOTICEBAR
*/
/*-------------------------------
* 1.GENERAL
* ----------------------------*/
html,
body {
overflow-x: hidden;
}
body {
font-family: '游ゴシック', YuGothic, sans-serif;
margin: 0;
padding: 0;
font-size: 16px;
background: #333;
font-weight: 500;
color: #fff;
overflow: hidden;
}
@media only screen and (max-width: 767px) {
body {
font-size: 14px;
letter-spacing: 0;
}
}
a {
color: #d6000f;
}
a:hover {
cursor: pointer;
color: #d6000f;
}
a:focus {
outline: none;
overflow: hidden;
text-decoration: none;
}
a[href^="tel:"] {
cursor: default;
text-decoration: none;
color: #dc1418;
}
a[href^="tel:"]:hover {
text-decoration: none;
}
@media screen and (max-width: 767px) {
a[href^="tel:"] {
cursor: pointer;
}
}
hr {
border-top: 2px solid #ccc;
}
@media screen and (max-width: 767px) {
hr {
border-width: 1px;
}
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
strong {
font-weight: 600;
}
@media (min-width: 1200px) {
.container {
width: 1100px;
}
}
@media only screen and (max-width: 767px) {
.container {
padding-left: 15px;
padding-right: 15px;
}
}
main {
margin: 0;
padding: 0;
}
main > .container {
background: #fff;
color: #000;
padding: 35px 0;
}
body#voice-page main > .container,
body#benefits-page main > .container {
padding-top: 0;
}
@media only screen and (max-width: 767px) {
main > .container {
padding: 20px 0;
}
}
.section-wrap {
margin: 0;
padding-bottom: 40px;
position: relative;
}
.section-wrap.sponsor {
padding-top: 20px;
padding-bottom: 0;
}
body#benefits-page .section-wrap.sponsor,
body#voice-page .section-wrap.sponsor {
padding-top: 0;
}
@media only screen and (max-width: 767px) {
.section-wrap {
padding-bottom: 20px;
}
.section-wrap.sponsor {
padding-top: 20px !important;
padding-bottom: 100px !important;
}
body#top-page .section-wrap.sponsor {
padding-bottom: 80px !important;
}
}
.bg-gray {
margin: 0;
padding-top: 40px;
padding-bottom: 40px;
background: #e6e6e6;
}
@media only screen and (max-width: 767px) {
.bg-gray {
padding-top: 25px;
padding-bottom: 30px;
}
}
.flex-box {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
align-content: flex-start;
}
.flex-box.center {
justify-content: center;
}
.flex-box.start {
justify-content: flex-start;
}
.opacity:hover {
opacity: 0.8;
transition: 0.7s;
}
@media only screen and (max-width: 767px) {
.w250-xs {
display: block;
width: 250px;
height: auto;
}
}
@media only screen and (max-width: 320px) {
.w250-xs {
width: 230px;
}
}
/* 1.1 Grids
* ------------------------------*/
.row-flex {
display: -ms-flexbox;
display: flex;
}
@media only screen and (min-width: 768px) {
.row-flex {
-ms-flex-align: stretch;
align-items: stretch;
}
}
@media only screen and (max-width: 767px) {
.row {
margin-left: -15px;
margin-right: -15px;
}
}
.row-flex > .col-xs-1, .row-flex > .col-sm-1, .row-flex > .col-md-1, .row-flex > .col-lg-1, .row-flex > .col-xs-2, .row-flex > .col-sm-2, .row-flex > .col-md-2, .row-flex > .col-lg-2, .row-flex > .col-xs-3, .row-flex > .col-sm-3, .row-flex > .col-md-3, .row-flex > .col-lg-3, .row-flex > .col-xs-4, .row-flex > .col-sm-4, .row-flex > .col-md-4, .row-flex > .col-lg-4, .row-flex > .col-xs-5, .row-flex > .col-sm-5, .row-flex > .col-md-5, .row-flex > .col-lg-5, .row-flex > .col-xs-6, .row-flex > .col-sm-6, .row-flex > .col-md-6, .row-flex > .col-lg-6, .row-flex > .col-xs-7, .row-flex > .col-sm-7, .row-flex > .col-md-7, .row-flex > .col-lg-7, .row-flex > .col-xs-8, .row-flex > .col-sm-8, .row-flex > .col-md-8, .row-flex > .col-lg-8, .row-flex > .col-xs-9, .row-flex > .col-sm-9, .row-flex > .col-md-9, .row-flex > .col-lg-9, .row-flex > .col-xs-10, .row-flex > .col-sm-10, .row-flex > .col-md-10, .row-flex > .col-lg-10, .row-flex > .col-xs-11, .row-flex > .col-sm-11, .row-flex > .col-md-11, .row-flex > .col-lg-11, .row-flex > .col-xs-12, .row-flex > .col-sm-12, .row-flex > .col-md-12, .row-flex > .col-lg-12 {
display: -ms-flexbox;
display: flex;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-line-pack: center;
align-content: center;
}
.row-flex > .col-xs-1 .btn-thick, .row-flex > .col-sm-1 .btn-thick, .row-flex > .col-md-1 .btn-thick, .row-flex > .col-lg-1 .btn-thick, .row-flex > .col-xs-2 .btn-thick, .row-flex > .col-sm-2 .btn-thick, .row-flex > .col-md-2 .btn-thick, .row-flex > .col-lg-2 .btn-thick, .row-flex > .col-xs-3 .btn-thick, .row-flex > .col-sm-3 .btn-thick, .row-flex > .col-md-3 .btn-thick, .row-flex > .col-lg-3 .btn-thick, .row-flex > .col-xs-4 .btn-thick, .row-flex > .col-sm-4 .btn-thick, .row-flex > .col-md-4 .btn-thick, .row-flex > .col-lg-4 .btn-thick, .row-flex > .col-xs-5 .btn-thick, .row-flex > .col-sm-5 .btn-thick, .row-flex > .col-md-5 .btn-thick, .row-flex > .col-lg-5 .btn-thick, .row-flex > .col-xs-6 .btn-thick, .row-flex > .col-sm-6 .btn-thick, .row-flex > .col-md-6 .btn-thick, .row-flex > .col-lg-6 .btn-thick, .row-flex > .col-xs-7 .btn-thick, .row-flex > .col-sm-7 .btn-thick, .row-flex > .col-md-7 .btn-thick, .row-flex > .col-lg-7 .btn-thick, .row-flex > .col-xs-8 .btn-thick, .row-flex > .col-sm-8 .btn-thick, .row-flex > .col-md-8 .btn-thick, .row-flex > .col-lg-8 .btn-thick, .row-flex > .col-xs-9 .btn-thick, .row-flex > .col-sm-9 .btn-thick, .row-flex > .col-md-9 .btn-thick, .row-flex > .col-lg-9 .btn-thick, .row-flex > .col-xs-10 .btn-thick, .row-flex > .col-sm-10 .btn-thick, .row-flex > .col-md-10 .btn-thick, .row-flex > .col-lg-10 .btn-thick, .row-flex > .col-xs-11 .btn-thick, .row-flex > .col-sm-11 .btn-thick, .row-flex > .col-md-11 .btn-thick, .row-flex > .col-lg-11 .btn-thick, .row-flex > .col-xs-12 .btn-thick, .row-flex > .col-sm-12 .btn-thick, .row-flex > .col-md-12 .btn-thick, .row-flex > .col-lg-12 .btn-thick {
display: -ms-flexbox;
display: flex;
-ms-flex-line-pack: center;
align-content: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
.row.row20 {
margin-left: -10px;
margin-right: -10px;
}
@media only screen and (max-width: 767px) {
.tp-cols.row.row20 {
margin-left: -5px;
margin-right: -5px;
}
}
.row.row20 > .col-xs-1, .row.row20 > .col-sm-1, .row.row20 > .col-md-1, .row.row20 > .col-lg-1, .row.row20 > .col-xs-2, .row.row20 > .col-sm-2, .row.row20 > .col-md-2, .row.row20 > .col-lg-2, .row.row20 > .col-xs-3, .row.row20 > .col-sm-3, .row.row20 > .col-md-3, .row.row20 > .col-lg-3, .row.row20 > .col-xs-4, .row.row20 > .col-sm-4, .row.row20 > .col-md-4, .row.row20 > .col-lg-4, .row.row20 > .col-xs-5, .row.row20 > .col-sm-5, .row.row20 > .col-md-5, .row.row20 > .col-lg-5, .row.row20 > .col-xs-6, .row.row20 > .col-sm-6, .row.row20 > .col-md-6, .row.row20 > .col-lg-6, .row.row20 > .col-xs-7, .row.row20 > .col-sm-7, .row.row20 > .col-md-7, .row.row20 > .col-lg-7, .row.row20 > .col-xs-8, .row.row20 > .col-sm-8, .row.row20 > .col-md-8, .row.row20 > .col-lg-8, .row.row20 > .col-xs-9, .row.row20 > .col-sm-9, .row.row20 > .col-md-9, .row.row20 > .col-lg-9, .row.row20 > .col-xs-10, .row.row20 > .col-sm-10, .row.row20 > .col-md-10, .row.row20 > .col-lg-10, .row.row20 > .col-xs-11, .row.row20 > .col-sm-11, .row.row20 > .col-md-11, .row.row20 > .col-lg-11, .row.row20 > .col-xs-12, .row.row20 > .col-sm-12, .row.row20 > .col-md-12, .row.row20 > .col-lg-12 {
padding-left: 10px;
padding-right: 10px;
}
@media only screen and (max-width: 767px) {
.tp-cols.row.row20 > .col-xs-1, .tp-cols.row.row20 > .col-sm-1, .tp-cols.row.row20 > .col-md-1, .tp-cols.row.row20 > .col-lg-1, .tp-cols.row.row20 > .col-xs-2, .tp-cols.row.row20 > .col-sm-2, .tp-cols.row.row20 > .col-md-2, .tp-cols.row.row20 > .col-lg-2, .tp-cols.row.row20 > .col-xs-3, .tp-cols.row.row20 > .col-sm-3, .tp-cols.row.row20 > .col-md-3, .tp-cols.row.row20 > .col-lg-3, .tp-cols.row.row20 > .col-xs-4, .tp-cols.row.row20 > .col-sm-4, .tp-cols.row.row20 > .col-md-4, .tp-cols.row.row20 > .col-lg-4, .tp-cols.row.row20 > .col-xs-5, .tp-cols.row.row20 > .col-sm-5, .tp-cols.row.row20 > .col-md-5, .tp-cols.row.row20 > .col-lg-5, .tp-cols.row.row20 > .col-xs-6, .tp-cols.row.row20 > .col-sm-6, .tp-cols.row.row20 > .col-md-6, .tp-cols.row.row20 > .col-lg-6, .tp-cols.row.row20 > .col-xs-7, .tp-cols.row.row20 > .col-sm-7, .tp-cols.row.row20 > .col-md-7, .tp-cols.row.row20 > .col-lg-7, .tp-cols.row.row20 > .col-xs-8, .tp-cols.row.row20 > .col-sm-8, .tp-cols.row.row20 > .col-md-8, .tp-cols.row.row20 > .col-lg-8, .tp-cols.row.row20 > .col-xs-9, .tp-cols.row.row20 > .col-sm-9, .tp-cols.row.row20 > .col-md-9, .tp-cols.row.row20 > .col-lg-9, .tp-cols.row.row20 > .col-xs-10, .tp-cols.row.row20 > .col-sm-10, .tp-cols.row.row20 > .col-md-10, .tp-cols.row.row20 > .col-lg-10, .tp-cols.row.row20 > .col-xs-11, .tp-cols.row.row20 > .col-sm-11, .tp-cols.row.row20 > .col-md-11, .tp-cols.row.row20 > .col-lg-11, .tp-cols.row.row20 > .col-xs-12, .tp-cols.row.row20 > .col-sm-12, .tp-cols.row.row20 > .col-md-12, .tp-cols.row.row20 > .col-lg-12 {
padding-left: 5px;
padding-right: 5px;
}
}
@media only screen and (max-width: 767px) {
.row > .col-xs-1, .row > .col-sm-1, .row > .col-md-1, .row > .col-lg-1, .row > .col-xs-2, .row > .col-sm-2, .row > .col-md-2, .row > .col-lg-2, .row > .col-xs-3, .row > .col-sm-3, .row > .col-md-3, .row > .col-lg-3, .row > .col-xs-4, .row > .col-sm-4, .row > .col-md-4, .row > .col-lg-4, .row > .col-xs-5, .row > .col-sm-5, .row > .col-md-5, .row > .col-lg-5, .row > .col-xs-6, .row > .col-sm-6, .row > .col-md-6, .row > .col-lg-6, .row > .col-xs-7, .row > .col-sm-7, .row > .col-md-7, .row > .col-lg-7, .row > .col-xs-8, .row > .col-sm-8, .row > .col-md-8, .row > .col-lg-8, .row > .col-xs-9, .row > .col-sm-9, .row > .col-md-9, .row > .col-lg-9, .row > .col-xs-10, .row > .col-sm-10, .row > .col-md-10, .row > .col-lg-10, .row > .col-xs-11, .row > .col-sm-11, .row > .col-md-11, .row > .col-lg-11, .row > .col-xs-12, .row > .col-sm-12, .row > .col-md-12, .row > .col-lg-12 {
padding-left: 15px;
padding-right: 15px;
}
}
/*** 1.1.1 Base 10 Grids ***/
.col-base10-xs-0 {
width: 0%;
}
.col-base10-xs-1 {
width: 10%;
}
.col-base10-xs-2 {
width: 20%;
}
.col-base10-xs-3 {
width: 30%;
}
.col-base10-xs-4 {
width: 40%;
}
.col-base10-xs-5 {
width: 50%;
}
.col-base10-xs-6 {
width: 60%;
}
.col-base10-xs-7 {
width: 70%;
}
.col-base10-xs-8 {
width: 80%;
}
.col-base10-xs-9 {
width: 90%;
}
.col-base10-xs-10 {
width: 100%;
}
@media only screen and (min-width: 768px) {
.col-base10-sm-0 {
width: 00%;
}
}
@media only screen and (min-width: 992px) {
.col-base10-md-0 {
width: 00%;
}
}
@media only screen and (min-width: 1200px) {
.col-base10-lg-0 {
width: 00%;
}
}
@media only screen and (min-width: 768px) {
.col-base10-sm-1 {
width: 10%;
}
}
@media only screen and (min-width: 992px) {
.col-base10-md-1 {
width: 10%;
}
}
@media only screen and (min-width: 1200px) {
.col-base10-lg-1 {
width: 10%;
}
}
@media only screen and (min-width: 768px) {
.col-base10-sm-2 {
width: 20%;
}
}
@media only screen and (min-width: 992px) {
.col-base10-md-2 {
width: 20%;
}
}
@media only screen and (min-width: 1200px) {
.col-base10-lg-2 {
width: 20%;
}
}
@media only screen and (min-width: 768px) {
.col-base10-sm-3 {
width: 30%;
}
}
@media only screen and (min-width: 992px) {
.col-base10-md-3 {
width: 30%;
}
}
@media only screen and (min-width: 1200px) {
.col-base10-lg-3 {
width: 30%;
}
}
@media only screen and (min-width: 768px) {
.col-base10-sm-4 {
width: 40%;
}
}
@media only screen and (min-width: 992px) {
.col-base10-md-4 {
width: 40%;
}
}
@media only screen and (min-width: 1200px) {
.col-base10-lg-4 {
width: 40%;
}
}
@media only screen and (min-width: 768px) {
.col-base10-sm-5 {
width: 50%;
}
}
@media only screen and (min-width: 992px) {
.col-base10-md-5 {
width: 50%;
}
}
@media only screen and (min-width: 1200px) {
.col-base10-lg-5 {
width: 50%;
}
}
@media only screen and (min-width: 768px) {
.col-base10-sm-6 {
width: 60%;
}
}
@media only screen and (min-width: 992px) {
.col-base10-md-6 {
width: 60%;
}
}
@media only screen and (min-width: 1200px) {
.col-base10-lg-6 {
width: 60%;
}
}
@media only screen and (min-width: 768px) {
.col-base10-sm-7 {
width: 70%;
}
}
@media only screen and (min-width: 992px) {
.col-base10-md-7 {
width: 70%;
}
}
@media only screen and (min-width: 1200px) {
.col-base10-lg-7 {
width: 70%;
}
}
@media only screen and (min-width: 768px) {
.col-base10-sm-8 {
width: 80%;
}
}
@media only screen and (min-width: 992px) {
.col-base10-md-8 {
width: 80%;
}
}
@media only screen and (min-width: 1200px) {
.col-base10-lg-8 {
width: 80%;
}
}
@media only screen and (min-width: 768px) {
.col-base10-sm-9 {
width: 90%;
}
}
@media only screen and (min-width: 992px) {
.col-base10-md-9 {
width: 90%;
}
}
@media only screen and (min-width: 1200px) {
.col-base10-lg-9 {
width: 90%;
}
}
@media only screen and (min-width: 768px) {
.col-base10-sm-10 {
width: 100%;
}
}
@media only screen and (min-width: 992px) {
.col-base10-md-10 {
width: 100%;
}
}
@media only screen and (min-width: 1200px) {
.col-base10-lg-10 {
width: 100%;
}
}
/* 1.2 Margin
* ------------------------------*/
.mt00 { margin-top: 0 !important; }
.mt05 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt30 { margin-top: 30px !important; }
.mt40 { margin-top: 40px !important; }
.mt50 { margin-top: 50px !important; }
.mb00 { margin-bottom: 0 !important; }
.mb05 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb50 { margin-bottom: 50px !important; }
.mr00 { margin-right: 0 !important; }
.mr30 { margin-right: 30px !important; }
.ml00 { margin-left: 0 !important; }
.ml30 { margin-left: 30px !important; }
.pl00 { padding-left: 0 !important; }
.pr00 { padding-right: 0 !important; }
@media only screen and (max-width: 767px) {
.mt00-xs {
margin-top: 0 !important;
}
.mt05-xs {
margin-top: 5px !important;
}
.mt10-xs {
margin-top: 10px !important;
}
.mt15-xs {
margin-top: 15px !important;
}
.mt20-xs {
margin-top: 20px !important;
}
.mt30-xs {
margin-top: 30px !important;
}
.mt40-xs {
margin-top: 40px !important;
}
.mb00-xs {
margin-bottom: 0 !important;
}
.mb05-xs {
margin-bottom: 5px !important;
}
.mb10-xs {
margin-bottom: 10px !important;
}
.mb15-xs {
margin-bottom: 15px !important;
}
.mb20-xs {
margin-bottom: 20px !important;
}
.mb30-xs {
margin-bottom: 30px !important;
}
.mb40-xs {
margin-bottom: 40px !important;
}
.mr00-xs {
margin-right: 0 !important;
}
.ml00-xs {
margin-left: 0 !important;
}
.pl15-xs {
padding-left: 15px !important;
}
.pr15-xs {
padding-right: 15px !important;
}
}
/* 1.3 Text
* ------------------------------*/
p {
line-height: 1.8 !important;
}
p.line-height2 {
line-height: 2 !important;
}
@media only screen and (max-width: 767px) {
p.line-height2 {
line-height: 1.8 !important;
}
.text-left-xs {
text-align: left !important;
}
.text-center-xs {
text-align: center !important;
}
.text-right-xs {
text-align: right !important;
}
}
.txt-min {
font-family: "游明æœ", YuMincho, serif !important;
}
.txt-red,
.txt-red a,
.txt-red a:hover {
color: #d6000f !important;
}
.txt-pink,
.txt-pink a,
.txt-pink a:hover {
color: #fe0005 !important;
}
.txt-white,
.txt-white a,
.txt-white a:hover {
color: #fff !important;
}
.txt-yellow,
.txt-yellow a,
.txt-yellow a:hover {
color: #ff0 !important;
}
.txt-black,
.txt-black a,
.txt-black a:hover {
color: #000 !important;
}
.txt-blue,
.txt-blue a,
.txt-blue a:hover {
color: #2a71b9 !important;
}
.txt-gray,
.txt-gray a,
.txt-gray a:hover {
color: #dbdde0 !important;
}
.txt-marker {
display: inline-block;
background: linear-gradient(transparent 60%, #FEFF01 60%);
}
a.txt-underline,
.txt-underline {
text-decoration: underline !important;
}
a.txt-underline:hover {
text-decoration: none !important;
}
.txt-link {
width: 800px;
margin: 30px auto 10px;
text-align: center;
font-size: 18px;
padding: 10px;
color: #ff0;
font-weight: 600;
border: 5px solid #ff0;
box-sizing: border-box;
}
@media only screen and (max-width: 991px) {
.txt-link {
width: 100%;
}
}
@media only screen and (max-width: 767px) {
.txt-link {
margin: 20px auto 5px;
font-size: 15px;
}
}
.txt-indent {
text-indent: -1em;
padding-left: 1em;
margin: 0;
}
.f10 { font-size: 10px !important; }
.f11 { font-size: 11px !important; }
.f12 { font-size: 12px !important; }
.f13 { font-size: 13px !important; }
.f14 { font-size: 14px !important; }
.f15 { font-size: 15px !important; }
.f16 { font-size: 16px !important; }
.f17 { font-size: 17px !important; }
.f18 { font-size: 18px !important; }
.f19 { font-size: 19px !important; }
.f20 { font-size: 20px !important; }
.f21 { font-size: 21px !important; }
.f22 { font-size: 22px !important; }
.f23 { font-size: 23px !important; }
.f24 { font-size: 24px !important; }
.f25 { font-size: 25px !important; }
.f30 { font-size: 30px !important; }
@media only screen and (max-width: 991px) {
.f18, .f19 {
font-size: 16px !important;
}
.f20, .f21 {
font-size: 17px !important;
}
.f22, .f23 {
font-size: 18px !important;
}
.f24, .f25 {
font-size: 20px !important;
}
.f30 {
font-size: 25px !important;
}
}
@media only screen and (max-width: 767px) {
.f13, .f14 {
font-size: 12px !important;
}
.f15, .f16 {
font-size: 13px !important;
}
.f17, .f18 {
font-size: 14px !important;
}
.f18, .f19, .f20, .f21 {
font-size: 15px !important;
}
.f22, .f23, .f24, .f25 {
font-size: 16px !important;
}
.f30 {
font-size: 17px !important;
}
.f15-xs {
font-size: 15px !important;
}
.f14-xs {
font-size: 14px !important;
}
.f13-xs {
font-size: 13px !important;
}
.f12-xs {
font-size: 12px !important;
}
.f11-xs {
font-size: 11px !important;
}
}
@media only screen and (max-width: 320px) {
.f11-xs-w320 {
font-size: 11px !important;
}
}
/* 1.4 Titles and Subtitles
* ------------------------------*/
h1, h2, h3, h4 {
margin: 0;
font-weight: normal;
line-height: 2;
}
.section-top-sub {
margin: 0;
padding: 0 0 8px;
border-bottom: 2px solid #7d7c7e;
line-height: 1;
}
@media only screen and (max-width: 767px) {
.section-top-sub {
}
}
.sub-catch {
margin: 0 0 20px;
font-size: 26px;
font-weight: 600;
text-align: center;
line-height: 1.8;
}
@media only screen and (max-width: 767px) {
.sub-catch {
font-size: 16px;
}
}
.sub-line {
width: 340px;
margin: 0 auto 30px;
padding-bottom: 5px;
font-family: '游明æœ', YuMincho, serif;
font-size: 22px;
font-weight: 600;
letter-spacing: 0.05em;
text-align: center;
line-height: 1;
border-bottom: 10px solid #fff854;
}
.sub-line.large {
width: 440px;
}
@media only screen and (max-width: 767px) {
.sub-line {
width: 230px;
margin-bottom: 20px;
font-size: 16px;
border-bottom-width: 8px;
}
}
@media only screen and (max-width: 480px) {
.sub-line.large {
width: 90%;
}
}
@media only screen and (max-width: 380px) {
.sub-line.large {
width: auto;
}
}
@media only screen and (max-width: 320px) {
.sub-line.large {
font-size: 14px;
}
}
.sub-bg {
margin: 0 auto 20px;
padding: 4px 10px;
font-size: 16px;
font-weight: 600;
text-align: center;
line-height: 1.5;
border-radius: 20px;
background: url(../img/pc/bg-yellow.png) bottom left repeat;
}
p + .sub-bg,
div + .sub-bg,
a + .sub-bg {
margin-top: 30px !important;
}
.sub-bg.blue {
color: #fff;
border-radius: 0;
padding: 6px 10px;
margin: 50px auto 30px;
font-size: 18px;
background: url(../img/pc/bg-blue.png) bottom left repeat;
}
@media only screen and (max-width: 767px) {
.sub-bg {
margin-bottom: 10px;
font-size: 14px;
}
p + .sub-bg,
div + .sub-bg,
a + .sub-bg {
margin-top: 20px !important;
}
.sub-bg.blue {
font-size: 15px;
padding: 4px 5px 5px;
margin: 30px auto 20px;
}
}
.subsub {
margin: 0 0 10px;
padding: 0;
font-size: 20px;
font-weight: 600;
line-height: 1.5;
}
@media only screen and (max-width: 767px) {
.subsub {
font-size: 14px;
}
}
.sub-blue {
margin: 0 0 10px;
padding: 0;
font-size: 18px;
text-align: center;
font-weight: 600;
line-height: 1.5;
color: #3151b6;
}
@media only screen and (max-width: 767px) {
.sub-blue {
font-size: 15px;
}
}
/* 1.5 Tables
* ------------------------------*/
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin: 20px auto;
border: 1px solid #ccc;
}
table th {
width: 25%;
padding: 10px;
vertical-align: middle;
font-weight: normal;
background: #eeeeee;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
text-align: center;
}
table td {
width: 75%;
padding: 10px;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
@media screen and (max-width: 767px) {
table th,
table td {
font-size: 12px;
}
table th {
width: 28%;
padding: 5px;
}
table td {
width: 78%;
padding: 5px 10px;
}
}
/* 1.6 Buttons
* ------------------------------*/
.btn-wrap {
margin: 15px auto 10px;
}
@media screen and (max-width: 767px) {
.btn-wrap {
margin: 10px auto -20px;
}
}
.btn {
display: block;
width: 800px;
height: 80px;
margin: 40px auto;
padding-top: 11px !important;
border-radius: 80px;
font-weight: 600;
font-size: 22px;
padding: 0 10px;
box-sizing: border-box;
border: none;
color: #000;
background: url(../img/pc/bg-yellow.png) bottom left repeat;
text-align: center;
position: relative;
line-height: 1.4;
}
.btn.end {
padding-top: 25px !important;
}
.btn.red {
background: #e20013;
color: #fff;
padding-top: 25px !important;
}
.btn .icon-btn {
display: block;
width: 23px;
height: 27px;
position: absolute;
top: 33%;
left: 25px;
margin: 0;
background: url(../img/pc/icon-btn.png) 0 0 no-repeat;
background-size: 23px 27px;
}
.btn.h-gaiyou {
padding-top: 11px !important;
height: 50px;
}
.btn.h-gaiyou.small {
width: 300px;
font-size: 18px;
padding-top: 10px !important;
height: 46px;
margin: 15px auto 10px;
}
.btn.h-gaiyou .icon-btn {
top: 23%;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
(min-resolution: 2dppx){
.btn .icon-btn {
background-image: url(../img/pc/icon-btn@2x.png);
}
}
.btn:hover {
background: #fef955 url(../img/pc/bg-yellow.png) bottom left repeat;
opacity: 0.8;
transition: 0.7s;
}
.btn:focus {
outline: none;
overflow: hidden;
text-decoration: none;
}
.btn.red:hover {
background: #e20013;
opacity: 0.8;
transition: 0.7s;
color: #fff;
}
@media only screen and (max-width: 991px) {
.btn {
width: auto;
}
}
@media only screen and (max-width: 767px) {
.btn {
height: 64px;
border-radius: 40px;
font-size: 18px;
line-height: 1.3;
margin-top: 20px;
}
.btn.end {
padding-top: 21px !important;
}
.btn.red {
padding-top: 8px !important;
font-size: 16px;
line-height: 1.5;
}
.btn .icon-btn {
width: 15px;
height: 18px;
background-size: 15px 18px;
top: 36%;
left: 15px;
}
.btn.h-gaiyou {
padding-top: 9px !important;
height: 40px;
}
.btn.h-gaiyou {
padding-top: 11px !important;
font-size: 15px !important;
}
.btn.h-gaiyou.small {
width: 220px;
height: 40px;
font-size: 14px !important;
margin: 12px auto;
}
.btn.h-gaiyou .icon-btn {
top: 29%;
}
}
@media only screen and (max-width: 320px) {
.btn {
font-size: 15px;
line-height: 1.4;
}
.btn.h-gaiyou.f15-xs {
padding-top: 12px !important;
font-size: 13px !important;
}
}
.btn-blue {
display: block;
width: 240px;
height: 40px;
margin: 20px auto 0;
padding: 12px 5px 0;
background: #3663a7;
box-sizing: border-box;
font-size: 16px;
color: #fff;
text-align: center;
line-height: 1;
}
.btn-blue.small {
width: 160px;
}
.btn-blue.left {
margin-left: 0;
}
.btn-blue:hover {
text-decoration: none;
color: #fff;
opacity: 0.8;
transition: 0.7s;
}
.btn-blue:focus {
outline: none;
overflow: hidden;
text-decoration: none;
color: #fff;
}
@media only screen and (max-width: 767px) {
.btn-blue {
width: 200px;
margin-top: 10px;
padding-top: 13px;
font-size: 15px;
}
.btn-blue.small {
width: 150px;
font-size: 14px;
}
}
@media only screen and (max-width: 320px) {
.btn-blue.small {
width: auto;
}
}
.btn.buy {
width: auto;
height: auto;
background: #e20013;
color: #fff;
border-radius: 0;
line-height: 1.7;
padding-top: 10px !important;
padding-bottom: 12px !important;
margin-bottom: 0;
}
.btn.buy.no-link {
height: auto;
cursor: auto;
padding: 10px 5px 9px !important;
}
.btn.buy span {
display: block;
font-size: 12px;
}
.btn.buy:hover {
background: #e20013;
}
.btn.buy.no-link:hover {
opacity: 1;
}
.btn.buy .icon-cart-btn {
display: block;
width: 38px;
height: 37px;
position: absolute;
/*top: 28%;*/
top: 32%;
left: 20px;
margin: 0;
background: url(../img/pc/icon-cart.png) 0 0 no-repeat;
background-size: 38px 37px;
}
@media only screen and (max-width: 767px) {
.btn.buy {
/*height: 80px;
padding-top: 7px !important;*/
padding-top: 9px !important;
padding-bottom: 11px !important;
margin: 10px auto 0;
height: auto;
}
.btn.buy .icon-cart-btn {
width: 28px;
height: 27px;
background-size: 28px 27px;
top: 35%;
}
.btn.buy span {
font-size: 10px;
}
}
/* 1.7 Lists
* ------------------------------*/
dl.dl-list {
width: 100%;
display: table;
margin: 0;
padding: 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
dl.dl-list + dl.dl-list {
border-top: none;
}
dl.dl-list dt {
width: 17%;
display: table-cell;
padding: 20px 10px;
background: #eeeeee;
font-weight: normal;
line-height: 2;
vertical-align: middle;
text-align: center;
}
dl.dl-list dd {
width: 83%;
display: table-cell;
padding: 20px 30px;
line-height: 2;
vertical-align: middle;
}
@media only screen and (max-width: 991px) {
dl.dl-list dt {
width: 25%;
}
dl.dl-list dd {
width: 75%;
}
}
@media only screen and (max-width: 767px) {
dl.dl-list dt,
dl.dl-list dd {
display: block;
width: 100%;
padding: 10px;
line-height: 1.8;
}
dl.dl-list.bdnone-xs {
border-top: none;
}
}
ul.disc-list {
list-style: disc;
margin: 0 0 30px 25px;
}
@media only screen and (max-width: 767px) {
ul.disc-list {
margin-bottom: 20px;
}
}
/* 1.8 Other Elements
* ------------------------------*/
/* 1.8.1 plugins ------------*/
.google-maps {
margin: 20px auto 0;
}
.google-maps iframe {
margin: 0;
padding: 0;
}
@media screen and (max-width: 767px) {
.google-maps {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
}
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
width: 100% !important;
}
.fb_iframe_widget {
margin: 20px 0;
}
/* 1.8.2 page top ------------*/
#pagetop {
display: block;
position: absolute;
top: -135px;
right: -40px;
margin: 0;
width: 22px;
height: 123px;
background: url(../img/pc/pagetop.png) 0 0 no-repeat;
background-size: 22px 123px;
z-index: 10;
text-indent: 100% !important;
white-space: nowrap;
overflow: hidden;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
(min-resolution: 2dppx){
#pagetop {
background-image: url(../img/pc/pagetop@2x.png);
}
}
@media screen and (max-width: 1199px) {
#pagetop {
top: 5px;
right: 0;
width: 15px;
height: 85px;
background-size: 15px 85px;
}
}
@media screen and (max-width: 767px) {
#pagetop {
top: 8px;
right: 10px;
width: 13px;
height: 70px;
background-size: 13px 70px;
}
}
/*-------------------------------
* 2. HEADER
* ----------------------------*/
header {
width: 1100px;
height: 125px;
margin: 0;
padding: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
margin: auto;
background: #000;
z-index: 100;
}
@media only screen and (max-width: 1199px) {
header {
width: 985px;
height: 65px;
}
}
@media only screen and (max-width: 991px) {
header {
width: 743px;
}
}
@media only screen and (max-width: 767px) {
header {
width: auto;
}
}
header .icon-kentei {
position: absolute;
top: 20px;
right: 20px;
margin: 0;
z-index: 2000;
}
@media only screen and (max-width: 1199px) {
header .icon-kentei {
display: none;
}
}
.navbar {
margin: 0;
}
.navbar-collapse {
padding-right: 0 !important;
padding-left: 0 !important;
}
.navbar-header {
width: 100%;
margin: 0;
position: relative;
}
.navbar-brand {
width: 100px;
display: block;
padding: 0;
margin: 0;
position: relative;
z-index: 2000;
}
.navbar-brand img {
width: 100px;
height: auto;
display: block;
position: absolute;
top: -23px;
left: 0;
}
@media only screen and (max-width: 1199px) {
.navbar-brand {
width: 60px;
}
.navbar-brand img {
width: 60px;
height: auto;
top: 0;
left: 10px;
}
}
.logo-txt {
position: absolute;
top: 20px;
left: 165px;
z-index: 2000;
}
.logo-txt img {
width: 200px;
height: auto;
}
@media only screen and (max-width: 1199px) {
.logo-txt {
top: 20px;
left: 85px;
}
.logo-txt img {
width: 140px;
}
}
@media only screen and (max-width: 320px) {
.logo-txt img {
width: 130px;
}
}
.icon-bar {
background: #fff;
}
/* 2.1 Main Nav
* ------------------------------*/
#main-nav {
width: 100%;
height: 95px;
margin: 0;
padding: 0;
}
#main-nav a {
color: #fff;
text-decoration: none;
}
#main-nav a:hover {
color: #fff;
background-color: transparent;
}
#main-nav a:focus {
background-color: transparent;
overflow: inherit;
}
#main-nav ul.nav {
width: 100.2%;
height: 95px;
display: flex;
flex-flow: row;
justify-content: center;
align-items: flex-start;
align-content: flex-start;
margin: 0;
font-weight: 600;
top: 30px;
left: -1px;
position: absolute;
z-index: 20;
font-size: 18px;
border-bottom: 16px solid #565656;
padding-right: 30px;
}
#main-nav ul.nav li a {
display: block;
height: 95px;
/*padding-left: 28px;
padding-right: 28px;*/
padding-left: 45px;
padding-right: 45px;
text-align: center;
border-bottom: 16px solid #565656;
line-height: 1.5;
}
#main-nav ul.nav li.home {
/*padding-right: 20px;*/
padding-right: 50px;
}
#main-nav ul.nav li.home a div::after {
width: 80%;
}
#main-nav ul.nav li a div {
display: block;
}
#main-nav ul.nav li a div::after {
position: absolute;
bottom: -16px;
left: 0;
right: 0;
margin: auto;
content: '';
width: 100%;
height: 16px;
background: url(../img/pc/bg-yellow.png) bottom left repeat;
transform: scale(0, 1);
transform-origin: left top;
transition: transform .3s;
z-index: 30;
}
#main-nav ul.nav li a:hover div::after,
#main-nav ul.nav li.current a div::after {
transform: scale(1, 1);
}
#main-nav ul.nav li .icon {
display: inline-block;
margin-right: 12px;
width: 12px;
height: 14px;
background: url(../img/pc/icon-introduction.png) top left no-repeat;
background-size: 12px 14px;
vertical-align: -11%;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
(min-resolution: 2dppx){
#main-nav ul.nav li .icon {
background-image: url(../img/pc/icon-introduction@2x.png);
}
}
@media only screen and (max-width: 1199px) {
#main-nav {
display: none;
}
}
/* 2.1.1 main-nav-xs (sp-only) ------------*/
#main-nav-xs {
display: none;
}
@media only screen and (max-width: 1199px) {
#main-nav-xs {
display: block;
}
nav.nav-sp {
position: fixed;
z-index: 3000;
top: 0;
left: 0;
background: #fff;
color: #000;
text-align: center;
transform: translateY(-100%);
transition: all 0.6s;
width: 100%;
}
nav.nav-sp ul {
background: #fff;
margin: 0 auto;
padding: 0;
width: 100%;
}
nav.nav-sp ul li {
font-size: 14px;
padding: 0;
width: 100%;
text-align: left;
border-bottom: 1px solid #000;
}
nav.nav-sp ul li:last-child {
padding-bottom: 0;
}
nav.nav-sp ul li a {
display: block;
color: #000;
padding: 8px 15px;
}
nav.nav-sp ul li a:hover {
text-decoration: none;
background: #fff754;
}
nav.nav-sp li.current {
background: url(../img/pc/bg-yellow.png) bottom left repeat;
}
nav.nav-sp.active {
transform: translateY(65px);
}
nav.nav-sp li .icon {
display: inline-block;
margin-right: 8px;
margin-left: -6px;
width: 12px;
height: 14px;
background: url(../img/sp/icon-introduction.png) top left no-repeat;
background-size: 12px 14px;
vertical-align: -8%;
}
nav.nav-sp li i {
display: inline-block;
margin-right: 6px;
font-size: 17px;
vertical-align: -10%;
}
nav.nav-sp li.sns-list {
padding: 10px;
}
nav.nav-sp li.sns-list a {
display: inline-block !important;
padding: 0 0 10px;
text-align: center;
margin: 0 auto;
}
nav.nav-sp li.sns-list a:hover {
background: none;
}
nav.nav-sp li.sns-list .sub {
margin: 0 0 10px;
font-size: 13px;
font-weight: 400;
line-height: 1.5;
text-align: center;
}
nav.nav-sp li.sns-list .fa-facebook,
nav.nav-sp li.sns-list .fa-twitter,
nav.nav-sp li.sns-list .fa-instagram {
font-size: 30px !important;
color: #fff !important;
background: #000;
width: 48px;
height: 48px;
border-radius: 50%;
text-align: center;
line-height: 1.6;
margin: 0 5px;
}
nav.nav-sp li.sns-list .fa-facebook:hover,
nav.nav-sp li.sns-list .fa-twitter:hover,
nav.nav-sp li.sns-list .fa-instagram:hover {
text-decoration: none !important;
opacity: 0.8;
transition: 0.7s;
}
nav.nav-sp li.sns-list .flex-box {
width: 195px;
margin: 10px auto -8px;
}
nav.nav-sp li.kentei-link a:hover {
color: #666;
background: none;
}
nav.nav-sp li.kentei-link img {
display: inline-block;
margin-right: 8px;
}
.nav-toggle {
display: block;
position: absolute;
right: 40px;
top: 14px;
width: 42px;
height: 51px;
cursor: pointer;
z-index: 4000;
background: inherit;
text-align: center;
}
.nav-toggle span {
display: block;
position: absolute;
}
.nav-toggle .line {
width: 23px;
border-bottom: solid 3px #fff;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
right: 0;
}
.nav-toggle .line:nth-child(1) {
top: 10px;
}
.nav-toggle .line:nth-child(2) {
top: 18px;
width: 16px;
}
.nav-toggle .line:nth-child(3) {
top: 26px;
}
.nav-toggle .menu {
width: 38px;
height: 15px;
left: -32px;
top: 13px;
background: url(../img/sp/icon-menu.png) 0 0 no-repeat;
background-size: 38px 15px;
text-indent: 100% !important;
white-space: nowrap;
overflow: hidden;
}
.nav-toggle.active .line:nth-child(1) {
top: 18px;
right: 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.nav-toggle.active .line:nth-child(3) {
top: 18px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav-toggle.active .line:nth-child(2) {
display: none;
}
}
@media only screen and (max-width: 767px) {
.nav-toggle {
right: 13px;
}
}
@media only screen and (max-width: 320px) {
.nav-toggle .menu {
width: 34px;
height: 13px;
top: 14px;
left: -27px;
background-size: 34px 13px;
}
}
/* 2.1.2 sns Icon ------------*/
#sns-list {
width: 60px;
height: 180px;
padding: 10px 20px 10px 10px;
position: fixed;
top: 200px;
right: -10px;
margin: 0;
background: #000;
color: #fff;
text-align: center;
z-index: 100 !important;
box-sizing: border-box;
border-radius: 10px;
}
#sns-list .sub {
margin: 0;
font-size: 12px;
font-weight: 600;
line-height: 1.5;
}
#sns-list .fa-facebook,
#sns-list .fa-twitter,
#sns-list .fa-instagram {
font-size: 21px !important;
color: #fff !important;
margin-top: 13px;
}
#sns-list .fa-facebook {
margin-top: 22px;
}
#sns-list .fa-facebook:hover,
#sns-list .fa-twitter:hover,
#sns-list .fa-instagram:hover {
text-decoration: none !important;
opacity: 0.8;
transition: 0.7s;
}
@media only screen and (max-width: 767px) {
#sns-list {
display: none;
}
}
.knt_general-set .icon_social {
padding: 0;
text-align: right
}
.knt_general-set .icon_social .line {
display: inline-block;
line-height: 23px
}
.knt_general-set .icon_social .line img {
vertical-align: top
}
.knt_general-set .icon_social iframe {
max-width: 150px !important
}
.knt_general-set .icon_social .twitter-share-button {
height: 25px !important
}
.social-sp {
margin: -20px auto 10px;
max-width: 330px;
}
body#top-page .social-sp {
/*max-width: 290px;*/
max-width: 300px;
}
.social-sp .icon_social {
position: relative;
right: 0;
top: 0;
z-index: 3
}
.social-sp .socialBoxON {
-ms-flex-pack: center;
-webkit-box-pack: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center
}
.social-sp .socialBoxON iframe {
margin: 5px;
}
/*-------------------------------
* 3. MAIN VISUAL
* ----------------------------*/
#main-visual {
width: 1100px;
height: 600px;
padding: 0;
margin: 124px auto 0;
color: #fff;
overflow: hidden;
position: relative;
}
@media only screen and (max-width: 1199px) {
#main-visual {
width: 985px;
margin-top: 65px;
}
}
@media only screen and (max-width: 991px) {
#main-visual {
width: 743px;
height: 500px;
}
}
@media only screen and (max-width: 767px) {
#main-visual {
width: auto;
height: 400px;
}
}
@media only screen and (max-width: 480px) {
#main-visual {
height: 300px;
}
}
#main-visual .main-txt {
position: absolute;
top: 30px;
right: 110px;
margin: 0;
z-index: 10;
}
#main-visual .logo-main {
position: absolute;
top: 360px;
right: 35px;
margin: 0;
z-index: 10;
}
@media only screen and (max-width: 991px) {
#main-visual .logo-main {
top: 320px;
}
}
@media only screen and (max-width: 767px) {
#main-visual .main-txt {
top: 20px;
right: 20px;
}
#main-visual .main-txt img {
width: 25px;
height: auto;
}
#main-visual .logo-main {
top: 280px;
left: 5px;
}
#main-visual .logo-main img {
width: 120px;
height: auto;
}
}
@media only screen and (max-width: 480px) {
#main-visual .logo-main {
top: 182px;
}
}
#main-visual .main-badge {
position: absolute;
z-index: 10;
top: 20px;
left: 20px;
}
@media only screen and (max-width: 991px) {
#main-visual .main-badge {
top: 10px;
left: 10px;
}
#main-visual .main-badge img {
width: 180px;
}
}
@media only screen and (max-width: 767px) {
#main-visual .main-badge img {
width: 130px;
}
}
/* 3.1 Main Slider
* ------------------------------*/
#main-visual .main-slider {
width: 100%;
margin: 0;
position: absolute;
top: 0;
left: 0;
}
#main-visual .main-slider li {
width: 100%;
height: 600px;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
display: block;
}
#main-visual .main-slider li span {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
@media only screen and (max-width: 991px) {
#main-visual .main-slider li {
height: 500px;
}
}
@media only screen and (max-width: 767px) {
#main-visual .main-slider li {
height: 400px;
}
}
@media only screen and (max-width: 480px) {
#main-visual .main-slider li {
height: 300px;
}
}
/*-------------------------------
* 4. TOP PAGE
* ----------------------------*/
/*4.2 Guide
*------------------------------*/
#tp-guide {
margin: 0;
padding: 0;
}
#tp-guide .container {
background: #000;
color: #fff;
padding-top: 20px;
padding-bottom: 40px;
}
@media only screen and (max-width: 767px) {
#tp-guide .container {
padding-bottom: 30px;
}
}
#tp-guide .sub {
margin: 0;
font-family: '游明æœ', YuMincho, serif;
font-size: 44px;
font-weight: 600;
letter-spacing: 0.03em;
text-align: center;
}
#tp-guide .sub .txt-counter {
display: inline-block;
margin-right: 15px;
font-size: 36px;
vertical-align: 3%;
}
#tp-guide .sub .circle {
display: inline-block;
margin: 0 10px 0 5px;
width: 40px;
height: 40px;
background: #f30014;
border-radius: 50%;
font-size: 30px;
vertical-align: 10%;
line-height: 1.35;
}
/* IE11 */
@media all and (-ms-high-contrast:none) {
*::-ms-backdrop, #tp-guide .sub .circle {
line-height: 1.7 !important;
}
}
#tp-guide .sub .txt-deadline {
display: inline-block;
padding: 8px 25px;
font-size: 25px;
background: url(../img/pc/bg-red.png) top left repeat;
border-radius: 6px;
line-height: 1;
vertical-align: 38%;
letter-spacing: 0;
box-sizing: border-box;
}
#tp-guide .sub .txt-deadline.extend {
font-size: 20px;
line-height: 1.5;
padding-bottom: 9px;
}
#tp-guide .sub .txt-deadline.extend.ver2 {
vertical-align: -10%;
}
#tp-guide .sub .txt-deadline.extend.ver3 {
width: 55%;
margin-top: 5px;
font-size: 25px;
line-height: 1.5;
padding-bottom: 7px;
}
#tp-guide .sub .txt-deadline.extend.ver3 span {
display: inline-block;
font-size: 22px;
}
/* IE11 */
@media all and (-ms-high-contrast:none) {
*::-ms-backdrop, #tp-guide .sub .txt-deadline {
padding: 10px 25px 1px !important;
}
}
@media only screen and (max-width: 1199px) {
#tp-guide .sub {
font-size: 40px;
}
#tp-guide .sub .txt-counter {
margin-right: 10px;
font-size: 30px;
}
#tp-guide .sub .txt-deadline {
margin: 5px 0 15px;
padding: 8px 10px;
font-size: 22px;
}
#tp-guide .sub .txt-deadline.extend.ver3 {
font-size: 22px;
}
#tp-guide .sub .txt-deadline.extend.ver3 span {
font-size: 20px;
}
}
@media only screen and (max-width: 991px) {
#tp-guide .sub .txt-deadline {
width: 50%;
margin: 0 auto 20px;
display: block;
}
#tp-guide .sub .txt-deadline.extend {
width: 70%;
font-size: 18px;
}
#tp-guide .sub .txt-deadline.extend.ver3 {
width: 70%;
}
}
@media only screen and (max-width: 767px) {
#tp-guide .sub {
font-size: 22px;
margin: 0;
}
#tp-guide .sub .txt-counter {
margin-right: 10px;
font-size: 18px;
}
#tp-guide .sub .circle {
width: 24px;
height: 24px;
font-size: 16px;
line-height: 1.5;
}
#tp-guide .sub .txt-deadline {
width: auto;
margin: 5px auto 15px;
font-size: 20px;
}
#tp-guide .sub .txt-deadline.extend {
width: auto;
font-size: 14px;
}
#tp-guide .sub .txt-deadline.extend.ver2 {
font-size: 16px;
padding-bottom: 8px;
}
#tp-guide .sub .txt-deadline.extend.ver3 {
width: auto;
font-size: 15px;
padding-top: 7px;
}
#tp-guide .sub .txt-deadline.extend.ver3 span {
font-size: 14px;
}
}
@media only screen and (max-width: 320px) {
#tp-guide .sub {
font-size: 20px;
}
#tp-guide .sub .txt-counter {
font-size: 15px;
}
#tp-guide .sub .circle {
width: 20px;
height: 20px;
font-size: 14px;
}
#tp-guide .sub .txt-deadline {
font-size: 18px;
}
#tp-guide .sub .txt-deadline.extend {
width: auto;
font-size: 12px;
}
#tp-guide .sub .txt-deadline.extend.ver2 {
font-size: 14px;
}
#tp-guide .sub .txt-deadline.extend.ver3,
#tp-guide .sub .txt-deadline.extend.ver3 span {
font-size: 13px;
}
}
#tp-guide .txt-area {
margin: 0 0 25px;
text-align: center;
font-size: 27px;
font-weight: 600;
}
#tp-guide .txt-kyu {
margin: 5px 0 15px;
text-align: center;
font-size: 27px;
font-weight: 600;
}
#tp-guide .txt-area span,
#tp-guide .txt-kyu span {
display: inline-block;
margin-right: 10px;
font-size: 24px;
}
#tp-guide .txt-theme {
display: block;
width: 640px;
margin: 25px auto 35px;
padding: 4px 10px;
background: #fff;
color: #dc1418;
text-align: center;
font-size: 16px;
font-weight: 600;
border: 5px solid #dc1418;
box-sizing: border-box;
position: relative;
}
#tp-guide .txt-theme.kokuchi-link {
color: #000;
border-color: #ffd800;
}
#tp-guide .txt-theme.kokuchi-link a {
display: block;
color: #000;
}
#tp-guide .txt-theme.kokuchi-link a:hover {
color: #666;
text-decoration: none;
}
#tp-guide .txt-theme.kokuchi-link .icon-pdf {
display: block;
position: absolute;
top: 5px;
left: 5px;
width: 20px;
}
@media only screen and (max-width: 991px) {
#tp-guide .txt-kyu,
#tp-guide .txt-area {
font-size: 22px;
}
#tp-guide .txt-kyu span,
#tp-guide .txt-area span {
font-size: 20px;
}
}
@media only screen and (max-width: 767px) {
#tp-guide .txt-area {
margin-bottom: 20px;
font-size: 18px;
line-height: 1.6 !important;
}
#tp-guide .txt-kyu {
margin-top: 10px;
font-size: 18px;
line-height: 1.6 !important;
}
#tp-guide .txt-area span,
#tp-guide .txt-kyu span {
font-size: 16px;
margin-right: 0;
}
#tp-guide .txt-theme {
width: auto;
margin: 15px auto 20px;
padding: 5px 10px;
font-size: 15px;
line-height: 1.45 !important;
}
#tp-guide .txt-theme.kokuchi-link .icon-pdf {
top: 50%;
transform: translateY(-50%);
}
}
@media only screen and (max-width: 360px) {
#tp-guide .txt-area {
font-size: 16px;
}
#tp-guide .txt-theme.kokuchi-link .icon-pdf {
width: 17px;
}
}
@media only screen and (max-width: 320px) {
#tp-guide .txt-area {
font-size: 15px;
}
#tp-guide .txt-theme {
font-size: 13px;
}
}
.notice-box {
width: 800px;
margin: 35px auto 30px;
font-family: '游明æœ', YuMincho, serif;
font-size: 40px;
padding: 10px 5px;
font-weight: 600;
letter-spacing: 0.03em;
text-align: center;
position: relative;
background: #fff;
border: 5px solid #dc1418;
color: #dc1418;
}
.notice-box .txt01,
.notice-box .txt02 {
display: inline-block;
font-size: 34px;
vertical-align: 5%;
}
.notice-box .txt01 {
margin-right: 15px;
margin-left: 10px;
}
.notice-box .circle {
display: inline-block;
margin: 0 10px 0 5px;
width: 40px;
height: 40px;
background: #dc1418;
border-radius: 50%;
font-size: 28px;
vertical-align: 10%;
line-height: 1.35;
color: #fff;
}
.notice-box .pict-circle {
width: 76px;
height: 76px;
background: #dc1418;
color: #fff;
border-radius: 50%;
position: absolute;
top: -20px;
left: -38px;
font-size: 22px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
align-content: center;
line-height: 1.2;
box-sizing: border-box;
}
/* IE11 */
@media all and (-ms-high-contrast:none) {
*::-ms-backdrop, .notice-box .circle {
line-height: 1.7 !important;
}
}
@media only screen and (max-width: 991px) {
.notice-box {
width: 640px;
font-size: 38px;
}
.notice-box .txt01,
.notice-box .txt02 {
font-size: 32px;
}
}
@media only screen and (max-width: 767px) {
.notice-box {
width: auto;
font-size: 22px;
margin: 20px auto;
padding: 7px 5px;
}
.notice-box .txt01,
.notice-box .txt02 {
font-size: 18px;
}
.notice-box .txt01 {
margin-right: 5px;
}
.notice-box .txt02 {
display: block;
}
.notice-box .circle {
width: 23px;
height: 23px;
font-size: 16px;
line-height: 1.4;
}
.notice-box .pict-circle {
width: 50px;
height: 50px;
top: -15px;
left: -10px;
font-size: 15px;
line-height: 1.2;
padding-bottom: 3px;
}
}
@media only screen and (max-width: 380px) {
.notice-box .txt01 {
margin-left: 35px;
}
}
@media only screen and (max-width: 320px) {
.notice-box {
font-size: 17px;
}
.notice-box .txt01,
.notice-box .txt02 {
font-size: 15px;
}
.notice-box .txt01 {
margin-left: 30px;
}
.notice-box .circle {
width: 20px;
height: 20px;
font-size: 14px;
line-height: 1.5;
}
.notice-box .pict-circle {
width: 44px;
height: 44px;
top: -15px;
left: -10px;
font-size: 14px;
line-height: 1.2;
}
}
.answer-box {
display: block;
width: 800px;
margin: 30px auto 40px;
padding: 10px;
background: #fff;
font-size: 16px;
color: #000;
border: 2px solid #dc1418;
box-sizing: border-box;
}
.answer-box .sub {
margin: 0 0 10px !important;
text-align: center;
font-weight: 600;
font-size: 18px !important;
position: relative;
letter-spacing: 0;
font-family: '游ゴシック', YuGothic, sans-serif !important;
}
.answer-box .sub .day {
position: absolute;
top: 5px;
right: 10px;
font-weight: 500;
font-size: 13px;
}
@media only screen and (max-width: 991px) {
.answer-box {
width: auto;
}
}
@media only screen and (max-width: 767px) {
.answer-box {
padding-bottom: 2px;
margin: 20px auto;
}
.answer-box .sub {
font-size: 15px !important;
}
.answer-box .sub .day {
display: block;
position: relative;
top: 0;
right: 0;
font-size: 12px;
}
}
.answer-box ul {
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
align-content: flex-start;
margin: 0;
}
.answer-box ul li {
text-align: center;
vertical-align: middle;
}
.answer-box ul.cols5 li {
width: 19%;
}
.answer-box ul.cols4 li {
width: 24%;
}
.answer-box ul.cols3 li {
width: 32%;
}
.answer-box ul li a.btn-blue {
width: auto;
margin: 0 auto;
}
@media only screen and (max-width: 767px) {
.answer-box ul li {
margin-bottom: 10px;
}
.answer-box ul li {
width: 50% !important;
padding-left: 5px;
padding-right: 5px;
}
.answer-box ul li:nth-of-type(odd) {
padding-left: 2px;
}
.answer-box ul li:nth-of-type(even) {
padding-right: 2px;
}
}
/*4.1 News & Banner
*------------------------------*/
#tp-news-bnr {
margin: 0;
padding: 0;
}
#tp-news-bnr .container {
background: #fff;
color: #000;
padding-top: 35px;
padding-bottom: 10px;
}
@media only screen and (max-width: 767px) {
#tp-news-bnr .container {
padding-top: 18px;
padding-bottom: 120px;
}
}
/* 4.1.1 news ------------*/
#tp-news-bnr .news-cont {
margin: 0 50px 25px;
}
@media only screen and (max-width: 991px) {
#tp-news-bnr .news-cont {
margin: 0 10px 25px;
}
}
@media only screen and (max-width: 767px) {
#tp-news-bnr .news-cont {
margin: 0 0 25px;
}
}
#tp-news-bnr .news-cont ul.list {
margin: 0;
}
#tp-news-bnr .news-cont ul.list li {
display: table;
width: 100%;
padding: 10px 0;
border-bottom: 1px solid #7c7b7e;
}
#tp-news-bnr .news-cont ul.list li .txt-day {
display: table-cell;
width: 90px;
vertical-align: middle;
font-size: 15px;
}
#tp-news-bnr .news-cont ul.list li p {
display: table-cell;
margin: 0;
vertical-align: middle;
text-align: left;
}
#tp-news-bnr .news-cont ul.list li a {
display: block;
color: #000 !important;
}
#tp-news-bnr .news-cont ul.list li a:hover {
text-decoration: none;
opacity: 0.7;
}
#tp-news-bnr .news-cont ul.list li .icon-new {
display: inline-block;
width: 40px;
height: 18px;
background: url(../img/pc/icon-new.png) 0 0 no-repeat;
background-size: 40px 18px;
text-indent: 100% !important;
white-space: nowrap;
overflow: hidden;
vertical-align: -10%;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
(min-resolution: 2dppx){
#tp-news-bnr .news-cont ul.list li .icon-new {
background-image: url(../img/pc/icon-new@2x.png);
}
}
@media only screen and (max-width: 767px) {
#tp-news-bnr .news-cont ul.list li {
padding: 8px 0;
}
#tp-news-bnr .news-cont ul.list li .txt-day {
width: 25%;
font-size: 14px;
vertical-align: top;
padding-top: 2px;
}
#tp-news-bnr .news-cont ul.list li p {
vertical-align: top;
}
}
@media only screen and (max-width: 320px) {
#tp-news-bnr .news-cont ul.list li .txt-day {
width: 30%;
}
}
#tp-news-bnr .news-cont .news-box {
height: 160px;
margin: 5px 0 0 0;
padding-right: 5px;
overflow: scroll;
overflow-x: hidden;
scrollbar-base-color: #ccc;
}
#tp-news-bnr .news-cont .news-box::-webkit-scrollbar {
width: 8px;
height: auto;
}
#tp-news-bnr .news-cont .news-box::-webkit-scrollbar-track {
background: #eeeeee;
}
#tp-news-bnr .news-cont .news-box::-webkit-scrollbar-thumb {
background: #ccc;
}
#tp-news-bnr .twitter-cont {
margin: 0 50px 25px;
}
@media only screen and (max-width: 991px) {
#tp-news-bnr .twitter-cont {
margin: 0 10px 25px;
}
#tp-news-bnr .twitter-cont .twitter-timeline {
height: 250px !important;
}
}
@media only screen and (max-width: 767px) {
#tp-news-bnr .twitter-cont {
margin: 0 0 25px;
height: 380px;
}
iframe .twitter-timeline-rendered {
width: 490px !important;
margin: 0 auto;
}
}
@media screen and (max-width: 480px) {
iframe.twitter-timeline-rendered {
width: 450px !important;
margin: 0 auto;
}
}
.timeline-Widget {
max-width: 300px !important;
width: 200px !important;
}
/* 4.1.2 banner ------------*/
#tp-news-bnr .bnr-cont {
margin: 40px 50px 20px;
}
#tp-news-bnr .bnr-cont ul.list {
margin: 0;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
align-content: flex-start;
}
#tp-news-bnr .bnr-cont.center ul.list {
justify-content: center;
}
#tp-news-bnr .bnr-cont ul.list li {
width: 49%;
margin-bottom: 20px;
}
#tp-news-bnr .bnr-cont ul.list.bnr-small {
justify-content: center;
}
#tp-news-bnr .bnr-cont ul.list.bnr-small li {
width: 31%;
padding-left: 10px;
padding-right: 10px;
}
@media only screen and (max-width: 991px) {
#tp-news-bnr .bnr-cont {
margin: 20px 0 30px;
}
}
@media only screen and (max-width: 767px) {
#tp-news-bnr .bnr-cont {
margin: 20px 0;
}
#tp-news-bnr .bnr-cont ul.list {
display: block;
}
#tp-news-bnr .bnr-cont ul.list li {
width: 100% !important;
margin-bottom: 15px;
}
#tp-news-bnr .bnr-cont ul.list li img {
width: 280px;
}
#tp-news-bnr .bnr-cont ul.list.bnr-small li {
padding: 0;
}
#tp-news-bnr .bnr-cont ul.list.bnr-small li img {
width: 250px;
}
}
@media only screen and (max-width: 320px) {
#tp-news-bnr .bnr-cont ul.list li img {
width: 250px;
}
#tp-news-bnr .bnr-cont ul.list.bnr-small li img {
width: 230px;
}
}
/*4.3 Juken table
*------------------------------*/
.juken-box {
display: block;
width: 800px;
margin: 30px auto 40px;
box-sizing: border-box;
}
.juken-box .sub {
margin: 0 0 10px !important;
text-align: center;
font-weight: 600;
font-size: 22px !important;
letter-spacing: 0;
font-family: '游ゴシック', YuGothic, sans-serif !important;
line-height: 1.8;
}
.juken-box .sub span {
display: inline-block;
line-height: 1.7;
font-size: 16px !important;
}
.juken-box .sub-bg {
padding: 12px 5px 11px;
margin: 20px 0 17px;
font-size: 22px !important;
}
@media only screen and (max-width: 991px) {
.juken-box {
width: auto;
}
}
@media only screen and (max-width: 767px) {
.juken-box {
margin: 20px auto;
}
.juken-box .sub {
font-size: 16px !important;
}
.juken-box .sub span {
margin-top: 5px;
font-size: 13px !important;
}
.juken-box .sub-bg {
margin: 20px 0 10px;
padding: 10px 5px;
font-size: 16px !important;
}
}
@media only screen and (max-width: 320px) {
.juken-box .sub {
font-size: 15px !important;
}
.juken-box .sub span {
font-size: 12px !important;
}
}
.juken-box .juken-table {
width: 100%;
margin: 15px auto 10px;
border: 2px solid #dc1418;
}
.juken-box .juken-table th,
.juken-box .juken-table td {
width: 50%;
text-align: center;
vertical-align: top;
font-weight: 600;
font-size: 16px;
line-height: 1.8;
border: none;
border-right: 2px solid #dc1418;
}
.juken-box .juken-table th {
background-color: #dc1418;
color: #fff;
font-size: 22px;
padding: 5px 5px 6px;
}
.juken-box .juken-table th:first-of-type {
border-color: #fff;
}
.juken-box .juken-table td {
background-color: #fff;
color: #000;
}
@media only screen and (max-width: 767px) {
.juken-box .juken-table {
margin-top: 0;
}
.juken-box .juken-table th,
.juken-box .juken-table td {
width: 100%;
font-size: 14px;
line-height: 1.6;
padding: 10px;
}
.juken-box .juken-table th {
font-size: 17px;
padding: 8px 5px;
}
.juken-box .juken-table th:first-of-type {
border-color: #dc1418;
}
.juken-box .juken-table tr:first-of-type th {
padding: 5px 5px 8px;
}
}
@media only screen and (max-width: 320px) {
.juken-box .juken-table th {
font-size: 14px;
}
}
.juken-box .btn-juken {
display: block;
width: 100%;
margin: 12px auto 10px;
color: #000;
background: url(../img/pc/bg-yellow.png) bottom left repeat;
font-size: 19px;
height: 50px;
padding-top: 8px;
box-sizing: border-box;
border-radius: 60px;
text-align: center;
font-weight: 600;
}
.juken-box .btn-juken:hover {
background: #fef955 url(../img/pc/bg-yellow.png) bottom left repeat;
opacity: 0.8;
transition: 0.7s;
text-decoration: none;
}
.juken-box .btn-juken:focus {
outline: none;
overflow: hidden;
text-decoration: none;
}
@media only screen and (max-width: 991px) {
.juken-box .btn-juken {
font-size: 17px;
padding-top: 10px;
}
}
@media only screen and (max-width: 767px) {
.juken-box .btn-juken {
height: 40px;
font-size: 15px;
padding-top: 7px;
margin-bottom: 8px;
}
}
@media only screen and (max-width: 320px) {
.juken-box .btn-juken {
font-size: 14px;
padding-top: 9px;
}
}
.juken-box .juken-gaiyo-only {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
align-content: center;
}
.juken-box .juken-gaiyo-only li {
width: 49%;
box-sizing: border-box;
}
.juken-box .juken-gaiyo-only li .btn-juken {
padding-top: 11px;
margin-bottom: 0;
font-size: 21px;
}
@media only screen and (max-width: 767px) {
.juken-box .juken-gaiyo-only li {
width: 100%;
margin: 5px 0 10px;
}
.juken-box .juken-gaiyo-only li:last-of-type {
margin-bottom: 0;
}
.juken-box .juken-gaiyo-only li .btn-juken {
margin-top: 0;
padding-top: 9px;
font-size: 16px;
}
}
.juken-box dl {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
align-content: center;
margin: 0 auto 10px;
}
.juken-box dl dt {
width: 48%;
font-size: 20px;
font-weight: 600;
line-height: 1.7;
box-sizing: border-box;
padding-left: 30px;
}
.juken-box dl dd {
width: 52%;
font-size: 22px;
font-weight: 600;
line-height: 1.7;
box-sizing: border-box;
padding-left: 5px;
}
.juken-box dl dd span {
display: inline-block;
margin-right: 5px;
font-size: 25px;
}
.juken-box dl dd i {
display: inline-block;
margin-right: 30px;
font-size: 30px;
}
@media only screen and (max-width: 767px) {
.juken-box dl {
border-bottom: 1px solid #fff;
}
.juken-box dl:last-of-type {
border: none;
}
.juken-box dl dt {
width: 100%;
padding: 5px 0 0;
font-size: 15px;
text-align: center;
}
.juken-box dl dd {
width: 100%;
font-size: 15px;
padding: 5px 0 10px;
text-align: center;
}
.juken-box dl dd span {
font-size: 18px;
}
.juken-box dl dd i {
display: none;
}
}
/*4.4 Insta list
*------------------------------*/
.insta-cont {
margin: 0 50px 35px;
}
.insta_list {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
list-style: none;
margin: 0;
}
.insta_list li {
width: 16.6666%;
box-sizing: border-box;
padding: 1px;
}
.insta_list img {
width: 100%;
height: 150px;
object-fit: cover;
}
.insta_list a:hover {
opacity: 0.8;
transition: 0.5s;
}
@media only screen and (max-width: 991px) {
.insta-cont {
margin: 30px 10px;
}
.insta_list img {
height: 120px;
}
}
@media only screen and (max-width: 767px) {
.insta-cont {
margin: 30px 0;
}
.insta_list img {
height: 100px;
}
}
@media only screen and (max-width: 480px) {
.insta_list li {
width: 33.3333%;
}
.insta_list img {
height: 100px;
}
}
@media only screen and (max-width: 320px) {
.insta_list img {
height: 80px;
}
}
/* 4.5 Entry list è¿½åŠ 230125
*------------------------------*/
.txt-noto-serif {
font-family: 'Noto Serif JP', serif !important;
font-weight: 400 !important;
}
.btn-entry-list {
max-width: 1000px;
margin: 5rem auto 2rem;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
align-content: stretch;
font-family: 'Noto Serif JP', serif !important;
font-weight: 400 !important;
gap: 30px 20px;
}
.btn-entry-list .cols {
width: calc(100% / 2 - 14px);
box-sizing: border-box;
position: relative;
background: #ecb42d;
color: #000;
overflow: hidden;
}
.btn-entry-list .cols a {
display: block;
color: #000;
border-left: 5px solid #fff;
padding: 0 0 0 15px;
margin: 20px 0 15px 20px;
min-height: 120px;
}
.btn-entry-list .cols a:hover {
text-decoration: none;
}
.btn-entry-list .cols:hover {
opacity: 0.8;
transition: 0.7s;
}
.btn-entry-list .cols.online {
background: #4b82d5;
}
.btn-entry-list .sub {
font-family: 'Noto Serif JP', serif !important;
font-weight: 700 !important;
font-size: 27px !important;
text-align: left !important;
letter-spacing: 0 !important;
margin: 0 0 0.8rem !important;
line-height: 1.3 !important;
}
.btn-entry-list .txt {
font-size: 20px;
}
.btn-entry-list .small {
display: inline-block;
font-size: 14px;
margin: 0;
line-height: 1.6 !important;
}
.btn-entry-list .pict01 {
position: absolute;
bottom: -5px;
right: -5px;
}
.btn-entry-list .pict02 {
position: absolute;
bottom: 0;
right: 0;
}
@media screen and (max-width: 1199px) {
.btn-entry-list .cols a {
min-height: 110px;
}
.btn-entry-list .sub {
font-size: 24px !important;
}
.btn-entry-list .txt {
font-size: calc(14px + 6 * (100vw - 320px) / 879);
}
.btn-entry-list .small {
font-size: calc(11px + 3 * (100vw - 320px) / 879);
}
.btn-entry-list .pict01 {
width: calc(190 / 1199 * 100vw);
}
.btn-entry-list .pict02 {
width: calc(210 / 1199 * 100vw);
}
}
@media screen and (max-width: 991px) {
.btn-entry-list .cols a {
min-height: 110px;
padding-left: 15px;
margin: 12px 0 12px 15px;
}
.btn-entry-list .sub {
line-height: 1.4 !important;
font-size: calc(19px + 1 * (100vw - 320px) / 671) !important;
}
}
@media screen and (max-width: 767px) {
.btn-entry-list {
max-width: 100%;
margin: 3rem auto 1.3rem;
gap: 15px 0;
}
.btn-entry-list .cols {
width: 100%;
}
.btn-entry-list .cols a {
min-height: 0;
}
.btn-entry-list .pict01 {
width: calc(140 / 767 * 100vw);
}
.btn-entry-list .pict02 {
width: calc(170 / 767 * 100vw);
}
}
@media screen and (max-width: 480px) {
.btn-entry-list .cols a {
min-height: 0;
padding-left: 12px;
margin: 10px 0 10px 12px;
}
.btn-entry-list .pict01 {
width: calc(140 / 480 * 100vw);
}
.btn-entry-list .pict02 {
width: calc(170 / 480 * 100vw);
}
}
/* 4.6 About / Book / Topics / Voice è¿½åŠ 230629
*------------------------------*/
#top-page .section-sub {
text-align: center;
color: #dc1418;
font-size: 24px;
font-weight: 600;
position: relative;
padding: 20px 0 0;
margin: 0;
}
#top-page .section-sub::before {
content: "";
width: 160px;
height: 15px;
background: #eb1e22;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
#top-page .wrap {
max-width: 970px;
margin: 0 auto 50px;
}
@media screen and (max-width: 1199px) {
#top-page .wrap {
padding-left: 50px;
padding-right: 50px;
}
}
@media screen and (max-width: 991px) {
#top-page .section-sub {
font-size: calc(17px + 7 * (100vw - 320px) / 671);
}
#top-page .wrap {
padding-left: 10px;
padding-right: 10px;
}
}
@media screen and (max-width: 767px) {
#top-page .wrap {
padding-left: 0;
padding-right: 0;
margin-bottom: 40px;
}
}
#top-page .btn-yellow {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
align-content: center;
max-width: 420px;
min-height: 70px;
border: 2px solid #ecb42d;
background: #ffff00;
font-size: 20px;
font-weight: 500;
text-align: center;
margin: 40px auto;
border-radius: 60px;
padding: 8px 10px 10px;
color: #000;
line-height: 1.5;
}
#top-page .btn-yellow.large {
max-width: 530px;
}
#top-page .btn-yellow.h-small {
min-height: 50px;
}
#top-page .btn-yellow span {
display: block;
width: 100%;
}
#top-page .btn-yellow:hover {
color: #000;
text-decoration: none;
opacity: 0.7;
transition: 0.5s;
}
@media screen and (max-width: 991px) {
#top-page .btn-yellow {
font-size: calc(15px + 5 * (100vw - 320px) / 671);
}
}
@media screen and (max-width: 767px) {
#top-page .btn-yellow {
line-height: 1.4;
margin: 30px auto;
min-height: 50px;
border-radius: 40px;
padding: 7px 10px 9px;
}
#top-page .btn-yellow span {
margin-top: 3px;
}
}
@media screen and (max-width: 480px) {
#top-page .btn-yellow {
max-width: 100%;
}
}
#top-page .btn-buy {
min-height: 60px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
align-content: center;
background: #3d3f40;
font-size: 20px;
font-weight: 500;
text-align: center;
margin: 0;
border-radius: 60px;
padding: 8px 10px 11px;
color: #fff;
line-height: 1.4;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#top-page .btn-buy span {
display: block;
width: 100%;
}
#top-page .btn-buy:hover {
color: #fff;
text-decoration: none;
opacity: 0.7;
transition: 0.5s;
}
@media screen and (max-width: 991px) {
#top-page .btn-buy {
font-size: calc(13px + 7 * (100vw - 320px) / 671);
}
}
@media screen and (max-width: 767px) {
#top-page .btn-buy {
border-radius: 30px;
white-space: nowrap;
position: relative;
padding: 7px 10px 9px;
min-height: 40px;
top: 0;
margin: 15px auto 0;
}
}
#top-page .btn-list {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;
align-content: flex-start;
margin: 0 auto;
gap: 0 20px;
max-width: 80%;
}
#top-page .btn-list li {
width: calc(100% / 2 - 10px );
}
#top-page .btn-gaiyo {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
align-content: center;
max-width: 420px;
min-height: 50px;
background: #ecb42d;
font-size: 18px;
font-weight: 500;
text-align: center;
margin: 20px auto 0;
border-radius: 60px;
padding: 8px 10px 10px;
color: #000;
line-height: 1.5;
}
#top-page .btn-gaiyo.online {
background: #4b82d5;
}
#top-page .btn-gaiyo:hover {
color: #000;
text-decoration: none;
opacity: 0.7;
transition: 0.5s;
}
@media screen and (max-width: 1199px) {
#top-page .btn-list {
max-width: 90%;
}
}
@media screen and (max-width: 991px) {
#top-page .btn-list {
max-width: 95%;
gap: 0 10px;
}
#top-page .btn-list li {
width: calc(100% / 2 - 5px );
}
#top-page .btn-gaiyo {
font-size: calc(14px + 4 * (100vw - 320px) / 671);
}
}
@media screen and (max-width: 767px) {
#top-page .btn-list {
gap: 20px 0;
margin-top: 30px;
}
#top-page .btn-list li {
width: 100%;
}
#top-page .btn-gaiyo {
line-height: 1.4;
border-radius: 40px;
padding: 7px 10px 9px;
margin: 0 auto;
}
}
/*----- mainvisualas下ã®banner -----*/
#tp-bnr .container {
background: #002d71;
}
#tp-bnr .bnr-top-list {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;
align-content: flex-start;
margin: 15px auto;
gap: 0 15px;
}
#tp-bnr .bnr-top-list li {
width: calc(100% / 2 - 8px );
box-sizing: border-box;
}
@media screen and (max-width: 767px) {
#tp-bnr .bnr-top-list {
gap: 15px 0;
}
#tp-bnr .bnr-top-list li {
width: 100%;
}
}
/*----- about -----*/
#tp-about .container {
background: #fff;
font-family: 'Noto Serif JP', serif;
font-weight: 400;
color: #000;
}
#tp-about .sub {
font-weight: 500;
font-size: 36px;
text-align: center;
line-height: 1.5;
margin: 7px 0 15px;
}
#tp-about .sub.medium {
font-size: 24px;
}
#tp-about .sub.small {
font-size: 20px;
}
#tp-about .subsub {
font-weight: 400;
font-size: 18px;
text-align: center;
line-height: 1.7;
margin: 0;
}
#tp-about .sub-gray {
font-weight: 400;
font-size: 20px;
text-align: center;
line-height: 1.7;
margin: 0 0 20px;
background: #dbdde0;
padding: 3px 5px 5px;
}
#tp-about .txt-read {
font-size: 18px;
text-align: center;
line-height: 1.8;
}
@media screen and (max-width: 991px) {
#tp-about .sub {
font-size: calc(18px + 18 * (100vw - 320px) / 671);
margin: 7px 0 15px;
}
#tp-about .sub.medium {
font-size: calc(17px + 7 * (100vw - 320px) / 671);
}
#tp-about .sub.small {
font-size: calc(16px + 4 * (100vw - 320px) / 671);
}
#tp-about .subsub {
font-size: calc(15px + 3 * (100vw - 320px) / 671);
}
#tp-about .sub-gray {
font-size: calc(16px + 4 * (100vw - 320px) / 671);
margin: 0 0 20px;
padding: 3px 5px 5px;
}
#tp-about .txt-read {
font-size: calc(15px + 3 * (100vw - 320px) / 671);
}
}
@media screen and (max-width: 767px) {
#tp-about .sub {
margin: 7px 0 10px;
}
#tp-about .subsub {
line-height: 1.6;
}
#tp-about .sub-gray {
line-height: 1.6;
margin-bottom: 12px;
padding: 2px 5px 3px;
}
#tp-about .txt-read {
line-height: 1.7;
}
}
#tp-about .chart-top-box {
max-width: 520px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
align-content: center;
margin: 30px auto;
gap: 0 70px;
}
#tp-about .chart-top-box div {
width: calc(100% / 2 - 35px );
box-sizing: border-box;
}
@media screen and (max-width: 767px) {
#tp-about .chart-top-box {
gap: 0 20px;
}
#tp-about .chart-top-box div {
width: calc(100% / 2 - 10px );
}
#tp-about .chart-top-box div img {
max-width: calc(270 / 767 * 100vw);
}
}
@media screen and (max-width: 480px) {
#tp-about .chart-top-box div img {
max-width: calc(210 / 480 * 100vw);
}
}
#tp-about .chart-box {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
align-content: center;
margin: 30px 0;
}
#tp-about .chart-box .img-area {
width: 225px;
box-sizing: border-box;
}
#tp-about .chart-box .txt-area {
flex: 1;
padding-left: 40px;
box-sizing: border-box;
}
@media screen and (max-width: 1199px) {
#tp-about .chart-box .txt-area {
padding-left: 30px;
}
}
@media screen and (max-width: 767px) {
#tp-about .chart-box {
margin: 16px 0;
}
#tp-about .chart-box .img-area,
#tp-about .chart-box .txt-area {
width: 100%;
}
#tp-about .chart-box .txt-area {
padding-left: 0;
}
#tp-about .chart-box .img-area img {
max-width: calc(270 / 767 * 100vw);
}
}
@media screen and (max-width: 480px) {
#tp-about .chart-box .img-area img {
max-width: calc(210 / 480 * 100vw);
}
}
#tp-about .chart-box dl {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: stretch;
align-content: stretch;
margin: 25px 0;
}
#tp-about .chart-box dl dt {
width: 20%;
min-height: 60px;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
align-content: center;
font-weight: 400;
line-height: 1.8;
text-align: center;
border: 2px solid #dbdde0;
}
#tp-about .chart-box dl dd {
width: 77%;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
align-content: center;
line-height: 1.8;
}
#tp-about .chart-box dl dd div {
width: 100%;
}
@media screen and (max-width: 1199px) {
#tp-about .chart-box dl dt {
width: 25%;
}
#tp-about .chart-box dl dd {
width: 72%;
}
}
@media screen and (max-width: 991px) {
#tp-about .chart-box dl dt {
width: 32%;
}
#tp-about .chart-box dl dd {
width: 64%;
}
}
@media screen and (max-width: 767px) {
#tp-about .chart-box dl {
margin: 20px 0 0;
}
#tp-about .chart-box dl dt,
#tp-about .chart-box dl dd {
line-height: 1.7;
width: 100%;
}
#tp-about .chart-box dl dt {
min-height: 34px;
}
#tp-about .chart-box dl dd {
padding-top: 10px;
}
}
/*----- book -----*/
#tp-book .container {
background: #FFFEC3;
font-family: 'Noto Serif JP', serif;
font-weight: 400;
color: #000;
}
#tp-book .book-top-box {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
align-content: stretch;
margin: 30px auto;
gap: 0 40px;
font-size: 19px;
font-weight: 500;
text-align: center;
}
#tp-book .book-top-box div {
width: calc(100% / 3 - 27px );
box-sizing: border-box;
position: relative;
padding-bottom: 75px;
}
#tp-book .book-top-box .txt {
margin: 15px 0;
line-height: 1.5 !important;
}
@media screen and (max-width: 1199px) {
#tp-book .book-top-box {
font-size: 17px;
gap: 0 30px;
}
#tp-book .book-top-box div {
width: calc(100% / 3 - 20px );
}
}
@media screen and (max-width: 991px) {
#tp-book .book-top-box {
font-size: calc(14px + 6 * (100vw - 320px) / 671);
}
}
@media screen and (max-width: 767px) {
#tp-book .book-top-box {
margin: 20px 0;
align-items: flex-start;
align-content: flex-start;
gap: 30px 20px;
}
#tp-book .book-top-box div {
width: calc(100% / 2 - 10px );
padding-bottom: 0;
}
#tp-book .book-top-box .txt {
margin: 10px 0;
}
}
/*----- topics -----*/
#tp-topics .container {
background: #000;
font-family: 'Noto Serif JP', serif;
font-weight: 400;
}
#tp-topics .wrap {
background: #fff;
color: #000;
padding-bottom: 40px;
}
@media screen and (max-width: 1199px) {
#tp-topics .wrap {
padding-left: 0;
padding-right: 0;
}
}
@media screen and (max-width: 767px) {
#tp-topics .wrap {
padding-left: 15px;
padding-right: 15px;
padding-bottom: 30px;
}
}
#tp-topics .sub {
max-width: 970px;
margin: 30px auto 0;
color: #fff;
background: #2B70B9;
font-size: 24px;
font-weight: 600;
text-align: center;
padding: 1px 0 5px;
}
#tp-topics .sub.pink {
background: #ed5053;
}
#tp-topics .subsub {
font-size: 36px;
font-weight: 500;
text-align: center;
margin: 0;
padding: 20px 0 0;
}
#tp-topics .txt-read {
font-size: 24px;
margin: 0 0 5px;
font-weight: 500;
line-height: 1.5 !important;
}
#tp-topics .txt + .txt-read {
margin-top: 10px;
}
#tp-topics .txt {
font-size: 18px;
line-height: 1.7 !important;
margin: 0;
}
@media screen and (max-width: 991px) {
#tp-topics .sub {
font-size: calc(17px + 7 * (100vw - 320px) / 671);
padding-bottom: 4px;
}
#tp-topics .subsub {
font-size: calc(17px + 19 * (100vw - 320px) / 671);
padding: 12px 0 7px;
}
#tp-topics .txt-read {
font-size: calc(15px + 9 * (100vw - 320px) / 671);
}
#tp-topics .txt {
font-size: calc(14px + 4 * (100vw - 320px) / 671);
}
}
@media screen and (max-width: 767px) {
#tp-topics .sub {
padding-bottom: 3px;
margin-top: 20px;
}
}
#tp-topics .topics-top-box {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
align-content: flex-start;
padding: 20px 50px 0;
}
#tp-topics .topics-top-box .txt-area {
flex: 1;
box-sizing: border-box;
padding-right: 20px;
}
#tp-topics .topics-top-box .img-area {
width: 22%;
box-sizing: border-box;
}
#tp-topics #topics02 .topics-top-box .img-area {
width: 28%;
}
#tp-topics .topics-top-box .img-area .img-topics01-1 {
max-width: 70%;
}
@media screen and (max-width: 767px) {
#tp-topics .topics-top-box {
padding: 10px 0 0;
}
#tp-topics .topics-top-box .txt-area {
width: 100% !important;
padding-right: 0;
}
#tp-topics .topics-top-box .img-area {
width: 100% !important;
margin-top: 15px;
}
}
#tp-topics .topics-list01,
#tp-topics .topics-list02 {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
align-content: flex-start;
padding: 0;
margin: 0;
}
#tp-topics .topics-list01 dt {
width: 120px;
box-sizing: border-box;
text-align: center;
font-size: 20px;
font-weight: 500;
line-height: 1.5;
}
#tp-topics .topics-list01 dt span {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
align-content: center;
background: #EC1D22;
color: #fff;
height: 120px;
}
#tp-topics .topics-list01 dd {
flex: 1;
box-sizing: border-box;
padding-left: 20px;
line-height: 1.7;
}
#tp-topics .topics-list01 dd strong {
font-weight: 700;
font-size: 18px;
}
#tp-topics .topics-list02 dt {
width: 120px;
box-sizing: border-box;
font-size: 18px;
font-weight: 500;
line-height: 1.7;
}
#tp-topics .topics-list02 dd {
flex: 1;
box-sizing: border-box;
font-size: 18px;
font-weight: 500;
line-height: 1.7;
}
@media screen and (max-width: 991px) {
#tp-topics .topics-list01 dt,
#tp-topics .topics-list01 dd {
font-size: calc(13px + 7 * (100vw - 320px) / 671);
}
#tp-topics .topics-list01 dd strong,
#tp-topics .topics-list02 dt,
#tp-topics .topics-list02 dd {
font-size: calc(14px + 4 * (100vw - 320px) / 671);
}
}
@media screen and (max-width: 767px) {
#tp-topics .topics-list01 dt {
width: calc(150 / 767 * 100vw);
}
#tp-topics .topics-list01 dt span {
height: calc(150 / 767 * 100vw);
}
#tp-topics .topics-list01 dd {
padding-left: 12px;
line-height: 1.6;
}
#tp-topics .topics-list02 dt {
width: 100px;
line-height: 1.6;
}
#tp-topics .topics-list02 dd {
line-height: 1.6;
}
}
/*----- voice -----*/
#tp-voice .container {
background: #fff;
font-family: 'Noto Serif JP', serif;
font-weight: 400;
color: #000;
}
#tp-voice .sub {
font-weight: 600;
font-size: 24px;
line-height: 1.7;
margin: 0 0 15px;
}
#tp-voice .sub span {
display: block;
font-size: 16px;
color: #8c7841;
}
#tp-voice .sub small {
display: inline-block;
font-size: 20px;
font-weight: 600;
color: #000;
margin-left: 3px;
}
#tp-voice .txt {
font-size: 18px;
}
@media screen and (max-width: 991px) {
#tp-voice .sub {
font-size: calc(17px + 7 * (100vw - 320px) / 671);
}
#tp-voice .sub span {
font-size: calc(14px + 2 * (100vw - 320px) / 671);
}
#tp-voice .sub small {
font-size: calc(16px + 4 * (100vw - 320px) / 671);
}
#tp-voice .txt {
font-size: calc(14px + 4 * (100vw - 320px) / 671);
}
}
@media screen and (max-width: 767px) {
#tp-voice .sub {
margin: 12px 0 10px;
text-align: center;
}
}
#tp-voice .voice-top-box {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
align-content: flex-start;
margin: 30px 0;
}
#tp-voice .voice-top-box .img-area {
width: 24%;
box-sizing: border-box;
}
#tp-voice .voice-top-box .txt-area {
width: 72%;
box-sizing: border-box;
}
@media screen and (max-width: 767px) {
#tp-voice .voice-top-box {
margin: 20px 0;
}
#tp-voice .voice-top-box .img-area,
#tp-voice .voice-top-box .txt-area {
width: 100%;
}
#tp-voice .voice-top-box .img-area img {
max-width: 50%;
}
}
/*----- modal -----*/
.hide-area {
display: none;
}
.modaal-close:after,
.modaal-close:before {
background: #fff;
}
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
background: #ccc;
}
.modaal-inner-wrapper {
padding: 0 !important;
}
.modaal-container {
max-width: 840px;
}
.modaal-content-container {
padding: 0;
border: none;
border-radius: 0;
}
@media screen and (max-width: 767px) {
.modaal-inner-wrapper {
padding: 0 4vw;
}
}
.modal-content {
background-color: #ffee00;
overflow: auto;
position: relative;
width: 100%;
border: none;
border-radius: 0;
}
.modal-content::-webkit-scrollbar {
width: 5px;
}
.modal-content::-webkit-scrollbar-track {
-webkit-border-radius: 10px;
border-radius: 10px;
}
.modal-content::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #333;
}
@media (max-width: 991px) {
.modal-content::-webkit-scrollbar {
width: 3px;
}
}
.modaal-close {
position: absolute;
color: #747474;
width: 50px;
height: 50px;
top: 5px;
right: 20px;
-webkit-transition: none;
transition: none;
}
.modaal-close:before,
.modaal-close:after {
width: 4px;
height: 28px;
}
.modaal-close:focus,
.modaal-close:hover {
background: none;
color: #fff;
}
.modaal-close::before,
.modaal-close::after,
.modaal-close:focus:before,
.modaal-close:focus:after,
.modaal-close:hover:before,
.modaal-close:hover:after {
background: #fff;
}
@media screen and (max-width: 767px) {
.modaal-close {
width: 30px;
height: 30px;
top: 0;
right: 15px;
}
.modaal-close:before,
.modaal-close:after {
width: 3px;
height: 18px;
}
}
.modal__header {
width: 100%;
height: 400px;
background: url(../img/pc/modal-tour-main.jpg) top right no-repeat;
background-size: cover;
position: relative;
box-sizing: border-box;
padding: 20px 40px 40px;
}
.modal__header .ttl-modal {
color: #ffee00;
font-size: 40px;
font-weight: 600;
font-family: 'Noto Serif JP', serif;
}
@media screen and (max-width: 767px) {
.modal__header {
height: 300px;
padding: 30px 40px;
background-position: 0 70%;
}
.modal__header .ttl-modal {
font-size: calc(20px + 5 * (100vw - 320px) / 447);
}
}
@media screen and (max-width: 480px) {
.modal__header {
height: 200px;
padding: 20px 15px;
}
}
.modal__body {
padding: 30px 40px;
line-height: 1.9;
}
.modal__body .sub-modal {
font-size: 24px;
font-weight: 700;
line-height: 1.5;
margin: 0 0 10px;
}
@media (max-width: 991px) {
.modal__body {
font-size: calc(13px + 4 * (100vw - 320px) / 671);
}
}
@media screen and (max-width: 767px) {
.modal__body {
padding: 15px 15px 5px;
line-height: 1.7;
}
.modal__body .sub-modal {
font-size: calc(16px + 8 * (100vw - 320px) / 447);
text-indent: -1.3em;
padding-left: 1.3em;
}
}
.modal__body .dl-modal {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
align-content: flex-start;
padding: 0;
margin: 0;
font-size: 14px;
}
.modal__body .dl-modal dt {
width: 80px;
box-sizing: border-box;
font-weight: 600;
line-height: 1.8;
}
.modal__body .dl-modal dd {
flex: 1;
box-sizing: border-box;
padding-left: 10px;
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.modal__body .dl-modal {
font-size: calc(13px + 1 * (100vw - 320px) / 671);
}
.modal__body .dl-modal dt {
width: 65px;
}
}
.modal__body .modal-box {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
align-content: flex-start;
}
.modal__body .modal-box .txt-area {
flex: 1;
box-sizing: border-box;
}
.modal__body .modal-box .img-area {
width: 214px;
box-sizing: border-box;
}
@media screen and (max-width: 767px) {
.modal__body .modal-box .txt-area,
.modal__body .modal-box .img-area {
width: 100%;
}
.modal__body .modal-box .img-area img {
width: 200px;
}
}
.modal__body .btn-modal {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
align-content: center;
max-width: 360px;
min-height: 50px;
background: #444444;
font-size: 18px;
font-weight: 600;
text-align: center;
margin: 20px auto 0;
border-radius: 60px;
padding: 8px 10px 10px;
color: #fff;
line-height: 1.5;
}
.modal__body .btn-modal:hover {
color: #fff;
text-decoration: none;
opacity: 0.7;
transition: 0.5s;
}
@media screen and (max-width: 991px) {
.modal__body .btn-modal {
font-size: calc(14px + 4 * (100vw - 320px) / 671);
}
}
@media screen and (max-width: 767px) {
.modal__body .btn-modal {
line-height: 1.4;
border-radius: 40px;
padding: 7px 10px 9px;
}
}
/*-------------------------------
* 5. CONTENTS
* ----------------------------*/
/*5.1 Box
*------------------------------*/
.waku-box {
margin: 20px 0 30px;
padding: 17px;
border: 6px solid #ccc;
}
@media only screen and (max-width: 767px) {
.waku-box {
margin-bottom: 20px;
}
}
.blue-box {
margin: 20px 0;
padding: 30px;
border: 10px solid #b3dbf3;
}
@media only screen and (max-width: 767px) {
.blue-box {
padding: 15px 10px;
border-width: 5px;
}
}
/*5.2 Cate Title
*------------------------------*/
#cate-ttl {
margin: 0 auto;
padding: 126px 0 0;
}
#cate-ttl .container {
height: 65px;
margin: 0 auto;
padding: 8px 10px 0;
background: url(../img/pc/bg-yellow.png) bottom left repeat;
box-sizing: border-box;
color: #000;
}
#cate-ttl .ttl {
margin: 0;
font-family: '游明æœ', YuMincho, serif;
font-size: 24px;
font-weight: 600;
letter-spacing: 0.05em;
text-align: center;
}
@media only screen and (max-width: 1199px) {
#cate-ttl {
padding-top: 65px;
}
#cate-ttl .container {
height: 60px;
}
#cate-ttl .ttl {
font-size: 22px;
}
}
@media only screen and (max-width: 767px) {
#cate-ttl .ttl {
padding-top: 1px;
font-size: 20px;
}
}
/*5.3 About
*------------------------------*/
.about-people-cont {
margin: 30px 0 -10px;
}
.txt-about-people {
display: inline-block;
margin-top: -15px;
font-size: 55px;
color: #d6000f;
}
.txt-about-people span {
display: inline-block;
margin: 0 3px;
font-size: 26px;
vertical-align: 5%;
color: #000;
}
@media only screen and (max-width: 767px) {
.about-people-cont {
margin: 20px 0 0;
}
.txt-about-people {
margin-top: -10px;
font-size: 35px;
}
.txt-about-people span {
font-size: 20px;
}
}
ul.about-tab {
width: 100%;
margin: 30px 0 0;
display: table;
table-layout: fixed;
}
ul.about-tab li {
display: table-cell;
padding: 5px;
font-weight: 600;
font-size: 20px;
text-align: center;
cursor: pointer;
background: #a4c4ea;
letter-spacing: 0.08em;
border-left: 5px solid #e6e6e6;
border-bottom: 2px solid #e6e6e6;
}
ul.about-tab li:first-of-type {
border-left: none;
}
ul.about-tab li:hover,
ul.about-tab li.active {
background: #fff;
border-bottom: none;
transition: 0.7s;
}
@media only screen and (max-width: 767px) {
ul.about-tab {
margin-top: 20px;
}
ul.about-tab li {
padding: 4px 5px 3px;
font-size: 14px;
letter-spacing: 0;
border-left-width: 3px;
border-bottom-width: 1px;
}
}
.about-cont {
margin: 0;
padding: 40px 40px 35px;
background: #fff;
}
.about-cont section {
display: none;
}
.about-cont section.show {
display: block;
}
@media only screen and (max-width: 767px) {
.about-cont {
padding: 25px 15px 20px;
}
}
/*5.4 Voice
*------------------------------*/
.voice-bg-wrap {
padding: 60px 0;
margin: 0;
background: url(../img/pc/bg-voice.jpg) center top no-repeat;
background-size: cover;
}
.voice-bg-wrap .container {
padding-left: 80px;
padding-right: 80px;
}
@media only screen and (max-width: 1199px) {
.voice-bg-wrap .container {
padding-left: 50px;
padding-right: 50px;
}
}
@media only screen and (max-width: 767px) {
.voice-bg-wrap {
padding: 20px 0;
}
.voice-bg-wrap .container {
padding-left: 15px;
padding-right: 15px;
}
}
.voice-bg-wrap .txt {
font-size: 17px;
margin: 0 0 20px;
}
.voice-bg-wrap .txt-name {
margin: 30px 0 0;
font-size: 16px;
line-height: 1.5;
}
.voice-bg-wrap .txt-name span {
font-size: 28px;
font-weight: 600;
font-family: '游明æœ', YuMincho, serif;
font-weight: 600;
letter-spacing: 0.05em;
}
@media only screen and (max-width: 767px) {
.voice-bg-wrap .txt {
font-size: 14px;
}
.voice-bg-wrap .txt-name {
margin-top: 20px;
font-size: 13px;
line-height: 1.4;
}
.voice-bg-wrap .txt-name span {
font-size: 20px;
}
.voice-bg-wrap .img {
float: right;
margin: 0 0 20px 20px;
}
.voice-bg-wrap .img img {
width: 120px;
height: auto;
}
}
.voice-wrap {
padding-bottom: 20px;
}
.voice-wrap .container {
margin: 0;
padding: 0 45px;
background: #fff;
}
@media only screen and (max-width: 767px) {
.voice-wrap {
padding-bottom: 15px;
}
.voice-wrap .container {
padding: 0 15px;
}
}
.voice-wrap .voice-inner {
width: auto;
margin: 0;
padding: 20px 20px 0;
background: #ffee33;
position: relative;
}
.voice-wrap .voice-inner:before,
.voice-wrap .voice-inner:after {
content: " ";
display: table;
}
.voice-wrap .voice-inner:after {
clear: both;
}
@media only screen and (max-width: 767px) {
.voice-wrap .voice-inner {
padding: 15px 15px 0;
}
}
.voice-wrap .voice-inner .fl-wrap {
float: left;
width: 650px;
}
.voice-wrap .voice-inner .fr-wrap {
float: right;
width: 300px;
}
@media only screen and (max-width: 1199px) {
.voice-wrap .voice-inner .fl-wrap {
width: 550px;
}
.voice-wrap .voice-inner .fr-wrap {
width: 270px;
}
}
@media only screen and (max-width: 991px) {
.voice-wrap .voice-inner .fl-wrap,
.voice-wrap .voice-inner .fr-wrap {
float: none;
width: auto;
}
}
.voice-wrap .voice-inner .box-cont {
position: relative;
}
.voice-wrap .voice-inner .box {
width: auto;
background: #fff;
padding: 20px 20px 10px;
margin-bottom: 20px;
font-size: 14px;
}
.voice-wrap .voice-inner .box:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 35px solid #fff;
border-left: 35px solid #ffee33;
width: 0;
height: 0;
z-index: 0;
}
.voice-wrap .voice-inner .box.border-none:before {
border: none;
}
@media only screen and (max-width: 767px) {
.voice-wrap .voice-inner .box {
padding: 10px 15px 5px;
margin-bottom: 15px;
font-size: 13px;
}
.voice-wrap .voice-inner .box:before {
border-bottom-width: 20px;
border-left-width: 20px;
}
}
.voice-wrap .voice-inner .box-ttl {
width: auto;
height: 150px;
background: #555555;
padding: 20px;
margin: 0;
overflow: hidden;
position: relative;
}
.voice-wrap .voice-inner .box-ttl:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 35px solid #555555;
border-left: 35px solid #ffee33;
width: 0;
height: 0;
z-index: 0;
}
@media only screen and (max-width: 767px) {
.voice-wrap .voice-inner .box-ttl {
height: 90px;
}
.voice-wrap .voice-inner .box-ttl:before {
border-bottom-width: 20px;
border-left-width: 20px;
}
}
@media only screen and (max-width: 320px) {
.voice-wrap .voice-inner .box-ttl {
height: 80px;
}
}
.voice-wrap .voice-inner .box-ttl .stamp-voice {
width: 110px;
height: auto;
position: absolute;
top: 20px;
left: 22px;
margin: 0;
}
.voice-wrap .voice-inner .box-ttl .img-voice {
width: auto;
height: 150px;
position: absolute;
margin: 0;
top: 0;
right: 0;
}
@media only screen and (max-width: 767px) {
.voice-wrap .voice-inner .box-ttl .stamp-voice {
width: 60px;
top: 14px;
left: 12px;
}
.voice-wrap .voice-inner .box-ttl .img-voice {
width: auto;
height: 90px;
}
}
@media only screen and (max-width: 320px) {
.voice-wrap .voice-inner .box-ttl .stamp-voice {
width: 50px;
top: 15px;
left: 10px;
}
.voice-wrap .voice-inner .box-ttl .img-voice {
height: 80px;
}
}
.voice-wrap .voice-inner .box-ttl .sub {
position: absolute;
margin: 0;
top: 40px;
left: 150px;
font-size: 28px;
line-height: 1.3;
color: #fff;
font-weight: 600;
}
.voice-wrap .voice-inner .box-ttl .sub span {
font-size: 20px;
}
@media only screen and (max-width: 767px) {
.voice-wrap .voice-inner .box-ttl .sub {
font-size: 17px;
top: 25px;
left: 85px;
}
.voice-wrap .voice-inner .box-ttl .sub.two-line {
top: 12px;
}
.voice-wrap .voice-inner .box-ttl .sub span {
font-size: 13px;
}
}
@media only screen and (max-width: 320px) {
.voice-wrap .voice-inner .box-ttl .sub {
font-size: 14px;
top: 22px;
left: 70px;
}
.voice-wrap .voice-inner .box-ttl .sub.two-line {
top: 13px;
}
.voice-wrap .voice-inner .box-ttl .sub span {
font-size: 12px;
}
}
.voice-wrap .voice-inner .icon {
float: right;
margin: 0 0 10px 10px;
}
@media only screen and (max-width: 767px) {
.voice-wrap .voice-inner .icon {
width: 50px;
height: auto;
margin-top: 5px;
}
}
.voice-wrap .voice-inner .subsub {
color: #1a418f;
margin: 12px 0 10px;
line-height: 1.5;
font-size: 17px;
}
.voice-wrap .voice-inner .subsub.txt-red {
color: #c7204b;
}
@media only screen and (max-width: 767px) {
.voice-wrap .voice-inner .subsub {
font-size: 15px;
line-height: 1.6;
}
}
.voice-wrap .voice-inner dl.faq {
margin: 10px 0 0;
padding: 0;
}
.voice-wrap .voice-inner dl.faq dt {
margin: 0;
padding: 0 0 10px;
background: url(../img/pc/icon-faq.png) 0 0 no-repeat;
font-weight: 600;
font-size: 18px;
line-height: 1.8;
}
.voice-wrap .voice-inner dl.faq dt span {
display: inline-block;
padding-left: 40px;
}
.voice-wrap .voice-inner dl.faq dd {
margin-bottom: 20px;
font-size: 16px;
line-height: 1.8;
}
@media only screen and (max-width: 767px) {
.voice-wrap .voice-inner dl.faq dt {
font-size: 15px;
background-size: 25px 25px;
line-height: 1.6;
padding-bottom: 7px;
}
.voice-wrap .voice-inner dl.faq dt span {
padding-left: 32px;
}
.voice-wrap .voice-inner dl.faq dd {
font-size: 13px;
margin-bottom: 15px;
}
}
/*5.5 Benefits
*------------------------------*/
.benefits-wrap {
padding-bottom: 20px;
}
.benefits-wrap .container {
margin: 0;
padding: 0 45px;
background: #fff;
}
.benefits-wrap .sub-benefits {
text-align: center;
font-size: 20px;
font-weight: 600;
margin: 0 auto 30px;
}
@media only screen and (max-width: 767px) {
.benefits-wrap {
padding-bottom: 5px;
}
.benefits-wrap .container {
padding: 0 15px;
}
.benefits-wrap .sub-bg {
font-size: 14px;
}
.benefits-wrap img.w80-xs {
width: 85%;
}
.benefits-wrap .sub-benefits {
font-size: 14px;
margin-bottom: 15px;
line-height: 1.8;
}
}
ul.benefits-img-list {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;
align-content: flex-start;
margin: 0;
}
ul.benefits-img-list li {
padding: 0 20px;
box-sizing: border-box;
margin: 0 0 10px;
}
ul.benefits-img-list.cols5 li {
width: 20%;
}
ul.benefits-img-list.cols3 li {
width: 33.3333%;
}
ul.benefits-img-list li .txt {
font-size: 13px;
text-align: center;
margin: 10px 0 0;
}
ul.benefits-img-list li .img-badge {
width: auto;
height: 150px;
}
@media only screen and (max-width: 1199px) {
ul.benefits-img-list li .img-badge {
height: 130px;
}
}
@media only screen and (max-width: 991px) {
ul.benefits-img-list li .img-badge {
height: 90px;
}
}
@media only screen and (max-width: 767px) {
ul.benefits-img-list li {
padding: 0 5px;
width: 50% !important;
}
ul.benefits-img-list li .img-badge {
height: 130px;
}
}
dl.benefits-txt-list {
width: 100%;
display: table;
margin: 0 auto;
font-family: "游明æœ", YuMincho, serif !important;
}
dl.benefits-txt-list.wide {
width: 95%;
}
dl.benefits-txt-list dt {
display: table-cell;
width: 55px;
font-weight: 400;
vertical-align: top;
line-height: 2;
font-size: 15px;
}
dl.benefits-txt-list dd {
display: table-cell;
vertical-align: top;
line-height: 2;
font-size: 15px;
}
dl.benefits-txt-list .price {
font-size: 18px;
line-height: 1.6;
}
dl.benefits-txt-list .del {
display: inline-block;
text-decoration: line-through;
color: #000;
}
@media only screen and (max-width: 1199px) {
dl.benefits-txt-list.wide {
width: 85%;
}
}
@media only screen and (max-width: 991px) {
dl.benefits-txt-list.wide {
width: 100%;
}
}
@media only screen and (max-width: 767px) {
dl.benefits-txt-list dt,
dl.benefits-txt-list dd {
font-size: 13px;
line-height: 1.8;
}
dl.benefits-txt-list dt {
width: 45px;
}
dl.benefits-txt-list .price {
font-size: 15px;
}
dl.benefits-txt-list .del.ml-xs {
margin-left: 2rem;
}
}
dl.benefits-txt-list.server dt {
width: 60%;
font-size: 16px;
line-height: 1.8;
}
dl.benefits-txt-list.server dd {
width: 40%;
text-align: right;
font-size: 16px;
line-height: 1.8;
}
dl.benefits-txt-list.server.w-ssize dt {
width: 100px;
font-size: 14px;
}
dl.benefits-txt-list.server.w-ssize dd {
width: auto;
text-align: left;
font-size: 14px;
}
@media only screen and (max-width: 767px) {
dl.benefits-txt-list.server dt,
dl.benefits-txt-list.server dd {
font-size: 14px;
}
dl.benefits-txt-list.server.w-ssize dt {
width: 90px;
font-size: 13px;
}
dl.benefits-txt-list.server.w-ssize dd {
font-size: 13px;
}
}
/* 5.5.1 20th è¿½åŠ 211209 ------------*/
/*----- TOP -----*/
.top-20th-box {
width: 800px;
margin: 25px auto 20px;
}
.top-20th-box + .top-20th-box {
margin-top: 30px;
}
@media only screen and (max-width: 991px) {
.top-20th-box {
width: auto;
}
}
@media only screen and (max-width: 767px) {
.top-20th-box {
margin: 15px auto;
}
.top-20th-box + .top-20th-box {
margin-top: 20px;
}
}
/*----- Benefits -----*/
.benefits-20th-wrap {
font-family: "ãƒ’ãƒ©ã‚®ãƒŽæ˜Žæœ ProN W3", "HiraMinProN-W3", "游明æœ", YuMincho, serif;
}
.ttl-20th {
margin: 30px auto 20px;
}
.txt-20th-read {
font-size: 15px;
text-align: center;
}
.sub-20th {
width: 100%;
box-sizing: border-box;
color: #fff;
border-radius: 0;
padding: 7px 5px 6px;
margin: 15px auto 25px;
font-size: 21px;
background: #d6000f;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
align-content: center;
font-weight: 600;
}
.sub-20th span:nth-of-type(1) {
display: block;
width: 72px;
margin-right: 15px;
}
.subsub-20th {
color: #d6000f;
font-size: 22px;
font-weight: 600;
margin: 0;
line-height: 1.7;
}
.txt-20th {
text-indent: -1em;
padding-left: 1em;
margin-bottom: 0;
}
.txt-20th span {
color: #ffd800;
}
@media only screen and (max-width: 991px) {
.sub-20th {
font-size: 19px;
}
.subsub-20th {
font-size: 18px;
}
}
@media only screen and (max-width: 767px) {
.ttl-20th {
width: 170px;
}
.txt-20th-read {
font-size: 14px;
line-height: 1.8;
}
.sub-20th {
font-size: 15px;
padding: 5px;
line-height: 1.5;
margin: 0 auto 15px;
}
.sub-20th span:nth-of-type(1) {
width: 15%;
margin-right: 0;
text-align: center;
}
.sub-20th span:nth-of-type(2) {
width: 80%;
box-sizing: border-box;
padding-left: 15px;
}
.subsub-20th {
font-size: 14px;
}
.txt-20th {
font-size: 13px;
}
}
@media only screen and (max-width: 320px) {
.ttl-20th {
width: 150px;
}
.txt-20th-read {
font-size: 13px;
}
.sub-20th {
font-size: 14px;
}
.subsub-20th {
font-size: 13px;
}
}
.txt-bg-20th {
display: block;
max-width: 640px;
color: #fff;
background: #d6000f;
margin: 15px 0 10px;
box-sizing: border-box;
font-size: 18px;
padding: 5px;
text-align: center;
font-weight: 600;
}
.waku-20th {
display: block;
max-width: 640px;
border: 5px solid #ffd800;
padding: 12px 15px 10px;
font-size: 16px;
margin: 20px 0 25px;
}
.waku-20th.medium-wide {
max-width: 500px;
}
.waku-20th p {
margin: 0;
}
@media only screen and (max-width: 767px) {
.txt-bg-20th {
font-size: 14px;
line-height: 1.6 !important;
margin: 12px 0 15px;
}
.waku-20th {
font-size: 13px;
padding: 12px 12px 10px;
margin: 15px 0 20px;
border-width: 3px;
}
}
@media only screen and (max-width: 320px) {
.txt-bg-20th {
font-size: 12px;
}
}
.benefits-20th-list01 {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;
align-content: center;
margin: 0 0 10px;
font-weight: 600;
}
.benefits-20th-list01 dt {
width: 13%;
background: #d6000f;
color: #fff;
text-align: center;
padding: 5px;
box-sizing: border-box;
font-size: 18px;
line-height: 1.6;
}
.benefits-20th-list01 dd:nth-of-type(1) {
width: 77%;
box-sizing: border-box;
padding-left: 15px;
font-size: 20px;
line-height: 1.6;
}
.benefits-20th-list01 dd:nth-of-type(1) span {
font-size: 16px;
}
.benefits-20th-list01 dd:nth-of-type(2) {
width: 10%;
box-sizing: border-box;
font-size: 22px;
color: #d6000f;
line-height: 1.6;
}
.benefits-20th-list01 dd:nth-of-type(2) span {
font-size: 18px;
}
@media only screen and (max-width: 1199px) {
.benefits-20th-list01 dt {
font-size: 17px;
}
.benefits-20th-list01 dd:nth-of-type(1) span {
font-size: 15px;
}
.benefits-20th-list01 dd:nth-of-type(2) {
font-size: 20px;
}
.benefits-20th-list01 dd:nth-of-type(2) span {
font-size: 16px;
}
}
@media only screen and (max-width: 991px) {
.benefits-20th-list01 dt {
font-size: 16px;
width: 18%;
}
.benefits-20th-list01 dd:nth-of-type(1) {
width: 67%;
}
.benefits-20th-list01 dd:nth-of-type(1) span {
display: block;
}
.benefits-20th-list01 dd:nth-of-type(2) {
font-size: 18px;
width: 15%;
}
}
@media only screen and (max-width: 767px) {
.benefits-20th-list01 {
align-items: stretch;
align-content: stretch;
}
.benefits-20th-list01 dt {
font-size: 14px;
width: 20%;
}
.benefits-20th-list01 dt span {
display: block;
padding-top: 6px;
}
.benefits-20th-list01 dd:nth-of-type(1) {
width: 66%;
font-size: 14px;
padding-left: 10px;
}
.benefits-20th-list01 dd:nth-of-type(1) span {
font-size: 13px;
}
.benefits-20th-list01 dd:nth-of-type(2) {
width: 14%;
font-size: 16px;
padding-top: 18px;
}
.benefits-20th-list01 dd:nth-of-type(2) span {
font-size: 13px;
}
}
@media only screen and (max-width: 320px) {
.benefits-20th-list01 dt {
font-size: 12px;
}
.benefits-20th-list01 dd:nth-of-type(1) {
font-size: 12px;
}
.benefits-20th-list01 dd:nth-of-type(1) span {
font-size: 12px;
}
.benefits-20th-list01 dd:nth-of-type(2) {
font-size: 14px;
}
.benefits-20th-list01 dd:nth-of-type(2) span {
font-size: 11px;
}
}
.benefits-20th-list02 {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
margin: 0 0 5px;
}
.benefits-20th-list02 dt {
width: 13%;
box-sizing: border-box;
font-weight: 400;
line-height: 1.6;
}
.benefits-20th-list02 dt span {
color: #ffd800;
}
.benefits-20th-list02 dd {
width: 87%;
line-height: 1.6;
font-weight: 400;
}
.benefits-20th-list02 dd p {
text-indent: -0.5em;
padding-left: 0.5em;
margin: 0;
line-height: 1.6 !important;
}
@media only screen and (max-width: 991px) {
.benefits-20th-list02 dt {
width: 20%;
}
.benefits-20th-list02 dd {
width: 80%;
}
}
@media only screen and (max-width: 767px) {
.benefits-20th-list02 dt {
width: 25%;
}
.benefits-20th-list02 dd {
width: 75%;
}
.benefits-20th-list02 dd p {
line-height: 1.5 !important;
}
}
@media only screen and (max-width: 320px) {
.benefits-20th-list02 {
font-size: 12px;
}
}
.benefits-20th-box {
background: #fdf0a6;
border-radius: 10px;
padding: 17px 20px 10px;
margin: 30px 0;
position: relative;
}
.benefits-20th-box .benefits-20th-list01 dt {
border-radius: 30px;
width: 10%;
}
.benefits-20th-box .img {
position: absolute;
top: -30px;
right: 30px;
margin: auto;
z-index: 20;
}
@media only screen and (max-width: 991px) {
.benefits-20th-box .benefits-20th-list01 dt {
width: 16%;
}
.benefits-20th-box .img {
width: 150px;
top: 5px;
}
}
@media only screen and (max-width: 767px) {
.benefits-20th-box {
border-radius: 7px;
padding: 10px;
margin: 10px 0 25px;
}
.benefits-20th-box .benefits-20th-list01 dt {
width: 30%;
}
.benefits-20th-box .benefits-20th-list01 dt span {
padding-top: 0;
}
.benefits-20th-box .benefits-20th-list01 dd:nth-of-type(1) {
width: 70%;
font-size: 15px;
padding-top: 5px;
}
.benefits-20th-box .img {
width: 120px;
top: 0;
left: 0;
position: relative;
}
}
.btn-benefits {
display: block;
margin: 20px auto 0;
}
.btn-link {
display: block;
margin: 0;
}
.btn-benefits:hover,
.btn-link:hover {
opacity: 0.8;
transition: 0.5s;
}
@media only screen and (max-width: 767px) {
.btn-benefits img {
width: 240px;
margin: 20px auto 25px;
}
.btn-link img {
width: 240px;
margin: 0 auto 20px;
}
.btn-link.long img {
width: 100%;
}
}
.benefits-20th-nintei-box {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-end;
align-content: flex-end;
margin-bottom: -20px;
}
.benefits-20th-nintei-box .cols:nth-of-type(1) {
width: 65%;
}
.benefits-20th-nintei-box .cols:nth-of-type(2) {
width: 33%;
box-sizing: border-box;
padding-bottom: 45px;
}
@media only screen and (max-width: 767px) {
.benefits-20th-nintei-box {
margin-top: -5px;
margin-bottom: 0;
}
.benefits-20th-nintei-box .cols:nth-of-type(1) {
width: 100%;
}
.benefits-20th-nintei-box .cols:nth-of-type(2) {
width: 55%;
margin: 10px auto 0;
padding-bottom: 0;
}
}
/*-------------------------------
* 6. FOOTER
* ----------------------------*/
footer {
width: 100%;
height: auto;
padding: 0;
position: fixed;
bottom: 0;
left: 0;
margin: 0;
text-align: center;
background: #333;
z-index: 100;
}
footer .container {
position: relative;
}
@media only screen and (max-width: 767px) {
footer {
height: 90px;
}
}
footer .entry-box {
display: none;
width: 640px;
height: 90px;
margin: 0 auto;
padding: 0;
font-weight: 600;
font-size: 23px;
box-sizing: border-box;
color: #000;
background: url(../img/pc/bg-yellow.png) bottom left repeat;
text-align: center;
position: relative;
line-height: 1.45;
}
footer .entry-box a {
display: block;
width: 640px;
height: 90px;
padding: 14px 10px;
box-sizing: border-box;
color: #000;
}
footer .entry-box.end a {
padding-top: 30px;
}
footer .entry-box a:hover {
text-decoration: none;
opacity: 0.8;
}
footer .entry-box .icon-btn {
display: block;
position: absolute;
top: -26px;
left: 0;
right: 0;
margin: auto;
width: 70px;
height: 35px;
border-radius: 35px 35px 0 0;
background: url(../img/pc/bg-yellow.png) 0 0 repeat;
z-index: 0;
}
footer .entry-box .icon-btn span {
display: block;
width: 27px;
height: 23px;
margin: 6px auto 0;
background: url(../img/pc/icon-btn-under.png) 0 0 no-repeat;
background-size: 27px 23px;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
(min-resolution: 2dppx){
footer .entry-box .icon-btn span {
background-image: url(../img/pc/icon-btn-under@2x.png);
}
}
@media only screen and (max-width: 767px) {
footer .entry-box {
display: block;
width: 80%;
height: 70px;
font-size: 18px;
line-height: 1.3;
}
footer .entry-box a {
width: 100%;
height: 70px;
padding-top: 13px;
}
footer .entry-box.end a {
padding-top: 24px;
font-size: 17px;
}
footer .entry-box.long-txt {
height: 75px;
}
footer .entry-box.long-txt a {
height: 75px;
padding-top: 12px;
padding-left: 5px;
padding-right: 5px;
font-size: 15px;
}
footer .entry-box.long-txt .small {
display: inline-block;
margin-top: 5px;
line-height: 1.5;
font-size: 10px;
letter-spacing: -0.08em;
}
footer .entry-box .icon-btn {
top: -20px;
}
footer .entry-box .icon-btn span {
width: 18px;
height: 15px;
background-size: 18px 15px;
}
}
@media only screen and (max-width: 320px) {
footer .entry-box {
font-size: 16px;
line-height: 1.45;
}
footer .entry-box a {
padding-left: 0;
padding-right: 0;
}
footer .entry-box.end a {
padding-top: 25px;
font-size: 15px;
}
footer .entry-box.long-txt a {
font-size: 13px;
}
footer .entry-box.long-txt .small {
letter-spacing: -0.18em;
}
}
.txt-list {
margin: 55px 0 0;
font-family: '游明æœ', YuMincho, serif;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.05em;
text-align: center;
}
body#top-page .txt-list {
margin: 20px 0 40px;
}
.txt-list li {
display: inline-block;
margin-left: 15px;
margin-right: 15px;
}
.txt-list li span {
font-size: 14px;
}
@media only screen and (max-width: 767px) {
.txt-list {
margin: 0 0 40px !important;
font-size: 14px;
letter-spacing: 0;
}
.txt-list li {
display: block;
margin: 0;
}
.txt-list li span {
font-size: 12px;
}
}
/*-------------------------------
* 7. NOTICEBAR
* ----------------------------*/
#knt_noticebar + header {
top: 60px;
}
#knt_noticebar {
background-color: #e6e6e6;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
height: 60px;
overflow: hidden;
}
#knt_noticebar p {
/*background: url(/common/images/i-attention.gif) 3% no-repeat;*/
color: #000;
font-size: 12px;
line-height: 1.6;
margin: 0;
padding: 10px 0;
text-align: left;
}
#knt_noticebar + header + #main-visual {
margin-top: 184px;
}
@media only screen and (max-width: 1199px) {
#knt_noticebar + header nav.nav-sp.active {
transform: translateY(125px);
}
#knt_noticebar + header + #main-visual {
margin-top: 124px;
}
}
@media only screen and (max-width: 767px) {
#knt_noticebar + header nav.nav-sp.active {
transform: translateY(145px);
}
#knt_noticebar + header {
top: 80px;
}
#knt_noticebar + header + #main-visual {
margin-top: 135px;
}
#knt_noticebar {
height: 80px;
}
}
@media only screen and (max-width: 480px) {
#knt_noticebar + header nav.nav-sp.active {
transform: translateY(140px);
}
#knt_noticebar + header {
top: 75px;
}
#knt_noticebar {
height: 75px;
}
#knt_noticebar p {
font-size: 11px;
}
}
@media only screen and (max-width: 320px) {
#knt_noticebar p {
font-size: 10px;
}
}
body.is_notice-bar #knt_noticebar.long-txt-box {
position: relative;
}
#knt_noticebar.long-txt-box + header {
top: 0;
}
#knt_noticebar.long-txt-box {
background-color: #333;
position: relative;
top: 125px;
margin: 0;
height: auto;
}
#knt_noticebar.long-txt-box .container {
background-color: #e6e6e6;
margin: 0 auto;
padding-top: 20px;
padding-bottom: 18px;
}
#knt_noticebar.long-txt-box p {
padding: 0 0 0 100px;
background: url(/common/images/i-attention.gif) 3% no-repeat;
}
#knt_noticebar.long-txt-box + header + #main-visual {
margin-top: 125px;
}
@media only screen and (max-width: 1199px) {
#knt_noticebar.long-txt-box {
top: 65px;
}
#knt_noticebar.long-txt-box + header + #main-visual {
margin-top: 65px;
}
}
@media only screen and (max-width: 767px) {
#knt_noticebar.long-txt-box .container {
padding-top: 15px;
}
#knt_noticebar.long-txt-box p {
padding-left: 40px;
}
}
.gbox {
background-color: #333;
position: relative;
top: 125px;
margin: 0;
height: auto;
color: #000;
}
.gbox .container {
background-color: #e6e6e6;
margin: 0 auto;
padding-top: 20px;
padding-bottom: 8px;
}
.gbox p {
padding: 0 0 0 100px;
font-size: 12px;
background: url(/common/images/i-attention.gif) 3% no-repeat;
}
body.is_notice-bar .gbox {
top: 185px;
margin-bottom: 184px;
}
@media only screen and (max-width: 1199px) {
.gbox {
top: 65px;
}
body.is_notice-bar .gbox {
top: 125px;
margin-bottom: 124px;
}
}
@media only screen and (max-width: 767px) {
body.is_notice-bar .gbox {
top: 140px;
margin-bottom: 139px;
}
.gbox .container {
padding-top: 15px;
}
.gbox p {
padding-left: 40px;
font-size: 11px;
}
}
body.is_notice-bar header {
top: 60px !important;
}
body.is_notice-bar #main-visual {
margin-top: 184px;
}
@media only screen and (max-width: 1199px) {
body.is_notice-bar nav.nav-sp.active {
transform: translateY(125px);
}
body.is_notice-bar #main-visual {
margin-top: 125px;
}
}
@media only screen and (max-width: 767px) {
body.is_notice-bar #knt_noticebar p {
padding: 5px 0;
line-height: 1.6 !important;
}
}
@media only screen and (max-width: 360px) {
body.is_notice-bar #knt_noticebar .container {
padding-left: 10px;
padding-right: 10px;
}
}