@charset "UTF-8"; @-webkit-keyframes fade-in { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } }@keyframes fade-in { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } /* mixin for multiline */ /*============================================================= 04_modules =============================================================*/ @keyframes fade-in { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } /* mixin for multiline */ /* inner ================================================ */ /* #styleguide mod_inner01 SP & TB:両端パディング20px PC:1120pxでセンタリング＆border-box TOPのみ:上下padding & border-bottom 主にコンテンツ部のsection内で使用 （追加class） .is_bdr：border-bottom ```

タイトル

テキストが入ります。テキストが入ります。テキストが入ります。

``` */ .mod_inner01 { padding-right: 20px; padding-left: 20px; } @media all and (min-width: 1120px) { .mod_inner01 { width: 1120px; margin: 0 auto; padding-right: 0; padding-left: 0; box-sizing: border-box; } } #home #contents .mod_inner01 { padding-top: 35px; padding-bottom: 35px; } @media all and (min-width: 1120px) { #home #contents .mod_inner01 { padding-top: 0; padding-bottom: 100px; } } @media all and (min-width: 1120px) { .mod_inner02 { width: 770px; margin-left: auto; margin-right: auto; box-sizing: border-box; } } .mod_inner02 iframe { width: 100%; height: 500px; } @media all and (max-width: 599px) { .mod_inner02 iframe { height: 350px; } } @media all and (min-width: 1120px) { .mod_inner04 { width: 480px; margin-left: auto; margin-right: auto; box-sizing: border-box; } } @keyframes fade-in { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } /* mixin for multiline */ /* title ================================================ */ .mod_tit01 { margin-bottom: 20px; font-weight: 700; text-align: center; } .mod_tit01 .ja { color: #d04539; font-size: 2.4rem; letter-spacing: .1em; line-height: 1.33333; } .mod_tit01 .en { font-size: 1.1rem; letter-spacing: .2em; line-height: 1.36364; } .mod_tit01 .sub { font-size: 1.8rem; margin-bottom: 15px; } @media all and (min-width: 1120px) { .mod_tit01 { margin-bottom: 50px; } .mod_tit01 .ja { font-size: 3rem; line-height: 1.43333; } .mod_tit01 .en { font-size: 1.3rem; line-height: 1.35714; } .mod_tit01 .sub { font-size: 2rem; margin-bottom: 15px; } } /* #styleguide mod_tit01 赤大文字＋英語黒小文字 ```

トピックス

TOPICS

``` */ .mod_tit02 { margin-bottom: 30px; padding-bottom: 14px; border-bottom: 1px solid #ccc; color: #d04539; font-size: 2.4rem; font-weight: bold; text-align: center; line-height: 1.33333; } @media all and (min-width: 1120px) { .mod_tit02 { padding-bottom: 20px; } } .mod_tit03 { margin-bottom: 30px; padding-bottom: 15px; border-bottom: 1px solid #ccc; color: #333; font-size: 1.8rem; font-weight: bold; text-align: center; line-height: 1.33333; } @media all and (min-width: 1120px) { .mod_tit03 { padding-bottom: 20px; } } .mod_tit04 { margin-bottom: 23px; text-align: center; } .mod_tit04 i { color: #d04539; font-size: 3.5rem; } .mod_tit04 span { display: block; margin-top: 4px; font-size: 1.3rem; font-weight: bold; } @media all and (min-width: 1120px) { .mod_tit04 { margin-bottom: 20px; } .mod_tit04 span { font-size: 1.8rem; } } .mod_tit05 { margin-bottom: 45px; text-align: center; font-weight: bold; } .mod_tit05 .lead { font-size: 2.2rem; } .mod_tit05 .lead ruby rb, .mod_tit05 .lead ruby rt { text-align: center; display: block; } .mod_tit05 .lead ruby rt { margin-bottom: 10px; } .mod_tit05 .sub { margin-top: 10px; margin-bottom: 15px; } .mod_tit05 .labelList { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 10px; } .mod_tit05 .labelList_item { color: #fff; background-color: #d04539; padding: 2px 5px; margin-right: 5px; } .mod_tit05 .labelList_item:last-child { margin-right: 0; } .mod_tit05 .labelList_item.reserv { background-color: #fff; border: 1px solid #d04539; color: #d04539; } .mod_tit05 .catList { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 30px; } .mod_tit05 .catList_item { margin-right: 5px; width: auto; height: 25px; } .mod_tit05 .catList_item:last-child { margin-right: 0; } .mod_tit05 .catList_item img { width: auto; height: 100%; } .mod_tit05 .change_cancel_info { color: #d04539; font-weight: normal; font-size: 2rem; } @media all and (min-width: 1120px) { .mod_tit05 { margin-bottom: 60px; } .mod_tit05 .lead { font-size: 2.8rem; } .mod_tit05 .sub { margin-top: 5px; font-size: 2.2rem; } } .mod_tit06 { margin-bottom: 30px; font-size: 2.2rem; font-weight: bold; } @media all and (min-width: 1120px) { .mod_tit06 { font-size: 2.8rem; } } .mod_tit07 { margin-bottom: 35px; text-align: center; } .mod_tit07 .tit { font-size: 1.8rem; font-weight: bold; } .mod_tit07 .txt { font-size: 1.3rem; } @media all and (min-width: 1120px) { .mod_tit07 { margin-bottom: 25px; } } .mod_tit08 { margin-bottom: 15px; padding-bottom: 4px; border-bottom: 2px solid #d04539; font-weight: bold; } .mod_tit08.is_aoi { border-bottom-color: #34689a; } .mod_tit08.is_jidai { border-bottom-color: #746bad; } .mod_tit08.is_gion { border-bottom-color: #dc8394; } .mod_tit08.is_okuribi { border-bottom-color: #8ec1fc; } @media all and (min-width: 1120px) { .mod_tit08 { margin-bottom: 30px; padding-bottom: 12px; font-size: 2.0rem; } } .mod_tit12, .mod_tit16 { font-size: 2.2rem; font-weight: bold; text-align: center; position: relative; padding-bottom: 13px; margin-bottom: 30px; display: block; } .mod_tit12.is_color_fox, .is_color_fox.mod_tit16 { color: #C79945; } .mod_tit12 > small, .mod_tit16 > small { display: block; font-size: 18px; } @media all and (min-width: 1120px) { .mod_tit12, .mod_tit16 { margin-bottom: 50px; } } .mod_tit12:after, .mod_tit16:after { width: 40px; height: 2px; background: #d04539; display: block; content: ''; position: absolute; bottom: 0; left: 50%; margin-left: -20px; } .mod_tit12.is_color_fox:after, .is_color_fox.mod_tit16:after { background: #fff; } .mod_tit12.is_aoi:after, .is_aoi.mod_tit16:after { background: #34689a; } .mod_tit12.is_jidai:after, .is_jidai.mod_tit16:after { background: #746bad; } .mod_tit12.is_gion:after, .is_gion.mod_tit16:after { background: #dc8394; } .mod_tit12.is_okuribi:after, .is_okuribi.mod_tit16:after { background: #8ec1fc; } .mod_tit13 { margin-bottom: 33px; text-align: center; } .mod_tit13 .label { letter-spacing: -.05em; text-align: center; margin-bottom: 15px; } .mod_tit13 .label li { display: inline-block; padding: 5px 27px; border: 1px solid; color: #d04539; font-size: 1.5rem; } .mod_tit13 .subtit { margin-bottom: 13px; font-size: 1.8rem; } .mod_tit13 .maintit { font-size: 3rem; } .mod_tit13 .maintit rt { font-size: 1.4rem; } .mod_tit13 .themeIco { display: inline-block; margin-top: 9px; height: 34px; } .mod_tit13 .themeIco img { width: auto; height: 100%; } .mod_tit13 .caption { display: inline-block; padding: 6px 27px; margin-top: 14px; background: #d04539; color: #fff; font-size: 1.5rem; } @media all and (min-width: 1120px) { .mod_tit13 { margin-bottom: 100px; } .mod_tit13 .subtit { margin-bottom: 15px; font-size: 2.4rem; } .mod_tit13 .maintit { font-size: 3.8rem; } .mod_tit13 .maintit tr { font-size: 1.8rem; } .mod_tit13 .themeIco { margin-top: 18px; } .mod_tit13 .caption { margin-top: 28px; font-size: 1.8rem; } } .mod_tit14 { margin-bottom: 23px; text-align: center; font-size: 1.8rem; } @media all and (min-width: 1120px) { .mod_tit14 { margin-bottom: 50px; font-size: 2.8rem; } } .mod_tit15 { width: 60px; margin: 0 auto 30px; } .mod_tit15 .tit { font-size: 3.8rem; font-weight: bold; line-height: 1.2; letter-spacing: 0.1em; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; white-space: nowrap; position: relative; } .mod_tit15 .tit ruby { margin: 0; text-indent: 0; } .mod_tit15 .tit ruby rt { margin: 0; font-size: 1.3rem; font-weight: bold; text-align: start; text-indent: 0; } @media all and (min-width: 1120px) { .mod_tit15 { margin-bottom: 93px; } } .mod_tit16 { font-size: 1.5rem; } @keyframes fade-in { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } /* mixin for multiline */ /* text ================================================ */ .mod_txt01 { margin-bottom: 30px; line-height: 1.86667; } .mod_txt01 .strong { font-weight: bold; } @media all and (min-width: 1120px) { .mod_txt01 { margin-bottom: 40px; } } .mod_txt02 { padding: 21px 25px; background: #eee; line-height: 1.86667; } @media all and (min-width: 1120px) { .mod_txt02 { padding: 24px 29px; } } .mod_txt02 .pdflink { margin-top: 1em; } .mod_txt02 .pdflink a { position: relative; display: inline-block; padding: 0 2em 0 1.5em; } @media all and (min-width: 1120px) { .mod_txt02 .pdflink a { padding-right: 4rem; } } .mod_txt02 .pdflink .icon-arrow-right { position: absolute; left: 0; top: 0; display: inline-block; color: #d04539; font-size: 2.8rem; } .mod_txt02 .pdflink .icon-other-pdf { position: absolute; right: 0; top: 0; display: inline-block; margin-left: 3px; color: #d04539; font-size: 2.8rem; } @media all and (min-width: 1120px) { .mod_txt02 .pdflink .icon-other-pdf { font-size: 3.6rem; top: -4px; } } .mod_txt03 { padding: 30px; border: 1px solid #ccc; } .mod_txt03 > p { word-break: break-all; } .mod_txt03.is_radius { border-radius: 5px; } .mod_contactTxt01 { margin-bottom: 30px; text-align: center; } .mod_contactTxt01 .place { font-size: 2.4rem; } @keyframes fade-in { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } /* mixin for multiline */ /* list ================================================ */ .mod_categories01 .item { position: relative; width: 100%; } .mod_categories01 .item a { overflow: hidden; display: block; width: 100%; height: 160px; box-sizing: border-box; border-radius: 5px; background: no-repeat 50% 50%; background-size: cover; color: #fff; text-align: center; text-decoration: none; } .mod_categories01 .item a i { font-size: 3rem; } .mod_categories01 .item a .txt { display: block; font-size: 1.5rem; font-weight: bold; } .mod_categories01 .item a .sub_txt { font-size: 1.2rem; font-weight: bold; } .mod_categories01 .item a .txtWrap { position: absolute; top: 50%; width: 100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .mod_categories01 .item + .item { margin-top: 10px; } .mod_categories01 .item01 a { background-image: url(../img/modules/pic_event01.png); } .mod_categories01 .item02 a { background-image: url(../img/modules/pic_event02.png); } @media all and (min-width: 600px) { .mod_categories01 .item { float: left; width: 49%; margin: 0 2% 2% 0; } .mod_categories01 .item + .item { margin: 0 2% 2% 0; } .mod_categories01 .item:nth-child(even) { margin-right: 0; } } @media all and (min-width: 1120px) { .mod_categories01 .item { width: 32%; margin: 0 2% 2% 0; } .mod_categories01 .item a { height: 172px; } .mod_categories01 .item a i { font-size: 3.6rem; } .mod_categories01 .item a .txt { font-size: 1.8rem; } .mod_categories01 .item + .item { margin: 0 2% 2% 0; } .mod_categories01 .item:nth-child(3n) { margin-right: 0; } } .mod_categories02 .item { position: relative; float: left; width: 49%; margin-top: 10px; } .mod_categories02 .item:nth-child(even) { float: right; } .mod_categories02 .item.is_current a:before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.65); z-index: 5; } .mod_categories02 .item a { overflow: hidden; position: relative; display: block; width: 100%; height: 75px; box-sizing: border-box; border-radius: 5px; background: no-repeat 50% 50%; background-size: cover; color: #fff; text-align: center; text-decoration: none; } .mod_categories02 .item a:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); } .mod_categories02 .item a .tag { position: absolute; top: 0; left: 0; padding: 1px 4px 2px; background: #d04539; color: #fff; font-size: 0.8rem; } .mod_categories02 .item a .txt { display: block; font-size: 1.5rem; font-weight: bold; } .mod_categories02 .item a .txtWrap { position: absolute; top: 50%; width: 100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @media all and (min-width: 600px) { .mod_categories02 .item { margin: 0 2% 2% 0; } .mod_categories02 .item + .item { margin: 0 2% 2% 0; } .mod_categories02 .item:nth-child(even) { float: left; margin-right: 0; } } @media all and (min-width: 1120px) { .mod_categories02 .item { width: 32%; margin: 0 2% 2% 0; } .mod_categories02 .item a { height: 150px; } .mod_categories02 .item a .tag { padding: 5px 11px 4px; font-size: 1.1rem; } .mod_categories02 .item a .txt { font-size: 1.8rem; } .mod_categories02 .item a i { font-size: 3.6rem; } .mod_categories02 .item + .item { margin: 0 2% 2% 0; } .mod_categories02 .item:nth-child(3n) { margin-right: 0; } } .mod_tags01 { margin-bottom: 47px; padding: 28px 0 30px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } .mod_tags01 .tit { clear: both; margin-bottom: 20px; font-size: 1.5rem; font-weight: bold; } .mod_tags01 .tit span { border-bottom: 3px solid #d04539; } .mod_tags01 .list { overflow: hidden; } .mod_tags01 .list .item { overflow: hidden; float: left; margin: 0 5px 5px 0; border-radius: 5px; } .mod_tags01 .list .item a { display: block; padding: 4px 11px 3px; background: #888; color: #fff; font-size: 1.3rem; font-weight: bold; } @media all and (min-width: 1120px) { .mod_tags01 { width: 960px; margin: 0 auto 67px; padding-bottom: 20px; border-top-width: 2px; border-bottom-width: 2px; } .mod_tags01 .tit span { padding-bottom: 2px; } .mod_tags01 .list .item { margin: 0 5px 10px 0; } } .mod_tabs01 { margin-bottom: 21px; text-align: center; } .mod_tabs01.is_space { margin-top: 40px; } .mod_tabs01 .list .item { position: relative; display: inline-block; padding-bottom: 8px; border-bottom: 2px solid transparent; font-size: 1.3rem; } .mod_tabs01 .list .item + .item { margin-left: 35px; } .mod_tabs01 .list .item + .item:before { position: absolute; content: ""; top: 1px; left: -20px; width: 1px; height: 1.2em; background: #333; } .mod_tabs01 .list .item.is_active { border-bottom-color: #d04539; font-weight: bold; } @media all and (min-width: 1120px) { .mod_tabs01 { margin-bottom: 40px; } .mod_tabs01.is_space { margin-top: 90px; } .mod_tabs01 .list .item { padding-bottom: 5px; cursor: pointer; } .mod_tabs01 .list .item.is_active { cursor: auto; } } .mod_share01 { margin-bottom: 97px; } .mod_share01 .tit { margin-bottom: 28px; font-weight: bold; text-align: center; } .mod_share01 .list { overflow: hidden; } .mod_share01 .list .item { display: table; float: left; width: 49%; margin: 0 2% 2% 0; } .mod_share01 .list .item:nth-child(even) { float: right; margin-right: 0; } .mod_share01 .list .item .link { display: table-cell; height: 50px; padding: 0 0 0 15px; box-sizing: border-box; vertical-align: middle; color: #fff; text-decoration: none; } .mod_share01 .list .item .link .txt { padding-top: 2px; font-size: 1.2rem; } .mod_share01 .list .item img { float: left; width: auto; margin-right: 12px; -webkit-backface-visibility: hidden; } .mod_share01 .list .twitter .link { background: #55ACEE; } .mod_share01 .list .twitter img { width: 20px; } .mod_share01 .list .facebook .link { background: #3B5998; } .mod_share01 .list .facebook img { width: 18px; } .mod_share01 .list .line .link { background: #00B900; } .mod_share01 .list .line img { width: 22px; } .mod_share01 .list .copy .link { background: #D04539; } .mod_share01 .list .copy img { width: 17px; } @media all and (min-width: 1120px) { .mod_share01 { width: 960px; margin: 0 auto 130px; } .mod_share01 .list .item { width: 24.4%; margin: 0 0.8% 0 0; } .mod_share01 .list .item:nth-child(even) { float: left; margin: 0 0.8% 0 0; } .mod_share01 .list .item:nth-child(4n) { margin-right: 0; } .mod_share01 .list .item .link { padding: 0 0 4px; text-align: center; cursor: pointer; -webkit-transition: all .5s; transition: all .5s; } .mod_share01 .list .item .link img { float: none; display: inline-block; vertical-align: middle; } .mod_share01 .list .item .link .txt { display: inline-block; padding: 0; } .mod_share01 .list .item .link:hover { opacity: .7; } } .mod_definitionlist01 { margin-bottom: 20px; } .mod_definitionlist01.is_gold > dt { background: #C79945; } .mod_definitionlist01:after { content: ""; display: table; clear: both; } .mod_definitionlist01 > dt { float: left; clear: left; width: 75px; padding: 3px 4px; margin: 0 13px 10px 0; margin-bottom: 10px; box-sizing: border-box; background: #d04539; font-size: 1.3rem; color: #fff; text-align: center; } .mod_definitionlist01 > dd { overflow: hidden; padding-top: 3px; margin-bottom: 10px; font-size: 1.5rem; } @media all and (min-width: 1120px) { .mod_definitionlist01 { margin-bottom: 30px; } .mod_definitionlist01 > dt { margin: 0 15px 20px 0; } .mod_definitionlist01 dd { margin-bottom: 20px; } } .mod_disclist01.is_gold li:before { background: #C79945; } .mod_disclist01.is_aoi li:before { background: #34689a; } .mod_disclist01.is_okuribi li:before { background: #8ec1fc; } .mod_disclist01.is_gion li:before { background: #dc8394; } .mod_disclist01.is_jidai li:before { background: #746bad; } .mod_disclist01 > li { position: relative; padding-left: 18px; } .mod_disclist01 > li:before { position: absolute; left: 0; top: 4px; content: ""; width: 15px; height: 15px; border-radius: 9999px; background: #d04539; } .mod_numlist01 { counter-reset: num; } .mod_numlist01.is_gold > li:before { background: #C79945; } .mod_numlist01.is_blue > li:before { background: #00A7CB; } .mod_numlist01 > li { position: relative; counter-increment: num; padding-left: 30px; font-weight: bold; } .mod_numlist01 > li > .sub { font-weight: normal; } .mod_numlist01 > li + li { margin-top: 20px; } .mod_numlist01 > li:before { position: absolute; left: 0; top: 0; content: counter(num); width: 24px; height: 24px; line-height: 25px; text-align: center; border-radius: 9999px; color: #fff; background: #d04539; } .mod_numlist02 { counter-reset: num; margin: 10px auto; } .mod_numlist02 > li { position: relative; counter-increment: num; padding-left: 22px; font-weight: bold; } .mod_numlist02 > li > .sub { font-weight: normal; } .mod_numlist02 > li + li { margin-top: 5px; } .mod_numlist02 > li:before { position: absolute; left: 0; top: 2px; content: counter(num); width: 18px; height: 18px; line-height: 18px; font-size: 13px; text-align: center; border-radius: 9999px; color: #001f55; background: #fff; } @keyframes fade-in { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } /* mixin for multiline */ /* button ================================================ */ /* #styleguide mod_btn01 ```

ボタンテキスト

``` */ .mod_btn01 { position: relative; width: 200px; height: 50px; margin: 40px auto 0; padding-top: 17px; box-sizing: border-box; background: #d04539; color: #fff; font-size: 1.2rem; font-weight: bold; text-align: center; } .mod_btn01 i { position: absolute; top: 50%; right: 17px; font-size: 1rem; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @media all and (min-width: 1120px) { .mod_btn01 { width: 300px; height: 75px; margin-top: 50px; padding-top: 24px; font-size: 1.8rem; cursor: pointer; } .mod_btn01 i { right: 18px; font-size: 1.5rem; } } .mod_btn02 { margin-top: 55px; text-align: center; } .mod_btn02 a { text-decoration: none; } .mod_btn02 a i { position: relative; top: 4px; margin-right: 5px; color: #d04539; font-size: 2rem; } .mod_btn02 a span { font-size: 1.5rem; font-weight: bold; } .mod_btn02 .backLastPage { margin-right: 15px; } .mod_btn02 .backLastPage:hover { cursor: pointer; } @media all and (min-width: 1120px) { .mod_btn02 { margin-top: 32px; } .mod_btn02 a:hover span { text-decoration: underline; } } .mod_btn03 { margin-top: 30px; text-align: center; } .mod_btn03 a { text-decoration: none; } .mod_btn03 a i { position: relative; top: 6px; margin-left: 15px; color: #d04539; font-size: 2.3rem; } .mod_btn03 a span { font-size: 1.5rem; font-weight: bold; } @media all and (min-width: 1120px) { .mod_btn03 { margin-top: 45px; } .mod_btn03 a:hover span { text-decoration: underline; } } .mod_btns01 { margin-top: 40px; } .mod_btns01 .item { overflow: hidden; max-width: 325px; margin-left: auto; margin-right: auto; border-radius: 30px; box-sizing: border-box; text-align: center; } .mod_btns01 .item a { padding: 14px 0; text-decoration: none; } .mod_btns01 .item span { margin-left: 30px; font-weight: bold; } .mod_btns01 .item i { font-size: 2.0rem; } .mod_btns01 .item i:before { position: absolute; } .mod_btns01 .item + .item { margin-top: 20px; } .mod_btns01 .map { background: #d04539; } .mod_btns01 .map a { display: block; color: #fff; } .mod_btns01 .map i:before { color: #fff; } .mod_btns01 .attention, .mod_btns01 .map02 { padding: 14px 0; background: #d04539; color: #fff; } .mod_btns01 .attention a, .mod_btns01 .map02 a { display: block; color: #fff; } .mod_btns01 .attention span, .mod_btns01 .map02 span { vertical-align: baseline; } .mod_btns01 .attention i:before, .mod_btns01 .map02 i:before { color: #fff; } .mod_btns01 .favorite { padding: 13px 0px; border: 1px solid #ccc; } .mod_btns01 .favorite i { color: #d04539; } @media all and (min-width: 1120px) { .mod_btns01 { overflow: hidden; width: 680px; margin: 65px auto 0; text-align: center; } .mod_btns01 .item { display: inline-block; width: 325px; margin: 0 6px; cursor: pointer; } .mod_btns01 .item + .item { margin-top: 0; } } .mod_btns07 { margin: 30px 0; } .mod_btns07 .btn + .btn { margin-top: 10px; } @media all and (min-width: 600px) { .mod_btns07 { width: 700px; margin: 50px auto; } .mod_btns07 .btn { float: left; } .mod_btns07 .btn a { width: 335px; box-sizing: border-box; } .mod_btns07 .btn:nth-child(even) { float: right; } .mod_btns07 .btn + .btn { margin: 0; } } .mod_btn07 a { position: relative; display: block; max-width: 335px; margin: auto; padding: 20px 15px; box-sizing: border-box; background: url(../img/modules/bg01.png) no-repeat 50% 50%; background-size: cover; color: #fff; font-weight: bold; text-align: center; text-decoration: none; } .mod_btn07 .txt { font-weight: bold; } .mod_btn07 .txt + .icon { right: 10px; left: inherit; } .mod_btn07 .icon { position: absolute; top: 50%; left: 30px; font-size: 2.4rem; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: absolute; } .mod_btn08 a { position: relative; text-decoration: none; display: block; padding: 20px 32px; background-color: #d04539; color: #fff; font-weight: bold; text-align: center; } .mod_btn08 i { position: absolute; top: 0; bottom: 0; right: 10px; height: 24px; margin: auto 0; font-size: 2.4rem; } .mod_btn08 + .mod_btn08 { margin-top: 10px; } .mod_btn08.is_aoi a { background-color: #34689a; } .mod_btn08.is_jidai a { background-color: #746bad; } .mod_btn08.is_gion a { background-color: #dc8394; } .mod_btn08.is_okuribi a { background-color: #8ec1fc; } @media all and (min-width: 600px) { .mod_btn08 { width: 335px; margin: auto; } } .mod_btns10 { margin: 30px 0; } .mod_btns10 .btn + .btn { margin-top: 10px; } @media all and (min-width: 600px) { .mod_btns10 { width: 670px; margin: 0 0 30px; } .mod_btns10 .btn { float: left; } .mod_btns10 .btn a { width: 330px; box-sizing: border-box; } .mod_btns10 .btn:nth-child(even) { float: right; } .mod_btns10 .btn + .btn { margin: 0; } } .mod_btn10 a { position: relative; display: block; max-width: 335px; margin: auto; padding: 15px 10px; box-sizing: border-box; background: #d04539; background-size: cover; color: #fff; font-weight: bold; text-align: center; text-decoration: none; } .mod_btn10 .txt { font-weight: bold; } .mod_btn10 .txt + .icon { right: 10px; left: inherit; } .mod_btn10 .icon { position: absolute; top: 50%; left: 30px; font-size: 2.4rem; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: absolute; } @keyframes fade-in { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } /* mixin for multiline */ /* search ================================================ */ .mod_search01 { padding-bottom: 50px; border-bottom: 1px solid #ccc; } .mod_search01 .leadTit { margin-bottom: 25px; border-bottom-width: 1px; } .mod_search01 .sec + .sec { margin-top: 30px; } .mod_search01 .sec .tit { clear: both; margin-bottom: 13px; font-size: 1.5rem; font-weight: bold; } .mod_search01 .sec .tit span { padding-bottom: 3px; border-bottom: 3px solid #d04539; } .mod_search01 .sec .tit .sub { display: inline-block; margin-left: 10px; font-size: 1.3rem; } .mod_search01 .sec .btnList { overflow: hidden; } .mod_search01 .sec .btnList .item { float: left; margin: 0 5px 10px 0; } .mod_search01 .sec .btnList .item label { display: block; padding: 2px 12px; border-radius: 5px; border: 1px solid #ccc; font-size: 1.3rem; cursor: pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .mod_search01 .sec .btnList .item input { display: none; } .mod_search01 .sec .btnList .item input:checked + label { border-color: #888; background: #888; color: #fff; } .mod_search01 .sec .date { position: relative; } .mod_search01 .sec .date i { position: absolute; top: 50%; right: 13px; font-size: 2.0rem; pointer-events: none; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .mod_search01 .sec .date input { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 40px; padding: 0 40px 0 15px; box-sizing: border-box; border-radius: 2px; border: 1px solid #ccc; font-size: 1.6rem; } .mod_search01 .sec .date + .date { margin-top: 40px; } .mod_search01 .sec .date + .date:before { position: absolute; content: ""; top: -28px; left: 50%; width: 5px; height: 15px; background: url(../img/common/ico_tilde.png) no-repeat center; background-size: contain; } .mod_search01 .sec .keyword { position: relative; display: block; padding-right: 45px; box-sizing: border-box; } .mod_search01 .sec .keyword .txt { position: relative; background: #fff; border-radius: 2px; } .mod_search01 .sec .keyword .txt input[type="text"] { display: block; width: 100%; height: 40px; padding: 10px; border: 1px solid #ccc; border-radius: 2px; box-sizing: border-box; font-size: 1.6rem; } .mod_search01 .sec .keyword .btn { position: absolute; top: 0; right: 0; width: 40px; height: 40px; padding-top: 8px; border-radius: 2px; background: #d04539; box-sizing: border-box; text-align: center; cursor: pointer; } .mod_search01 .sec .keyword .btn i { font-size: 2.4rem; } .mod_search01 .sec .keyword .btn i:before { color: #fff; } .mod_search01 .btnSubmit { position: relative; width: 200px; height: 50px; margin: 30px auto 0; } .mod_search01 .btnSubmit i { position: absolute; top: 50%; right: 15px; color: #fff; font-size: 1.7rem; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .mod_search01 .btnSubmit input { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 100%; border-radius: 0; outline: 0; background: #d04539; color: #fff; font-size: 1.2rem; } .mod_search01 .btnClear { position: relative; width: 200px; height: 50px; margin: 15px auto 0; } .mod_search01 .btnClear i { position: absolute; top: 50%; right: 15px; color: #d04539; font-size: 1.7rem; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .mod_search01 .btnClear input { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 100%; border-radius: 0; outline: 0; background: #fff; color: #d04539; font-size: 1.2rem; border: 1px solid; } @media all and (min-width: 1120px) { .mod_search01 { width: 960px; margin: 0 auto; padding-bottom: 30px; } .mod_search01 .form { overflow: hidden; } .mod_search01.is_col02 .sec { width: 470px; } .mod_search01.is_col02 .sec + .sec { margin-right: 0; } .mod_search01 .sec { float: left; width: 310px; margin: 0 20px 20px 0; } .mod_search01 .sec.is_wide { width: 100%; margin-right: 0; } .mod_search01 .sec + .sec { margin-top: 0; } .mod_search01 .sec.keywords { width: 100%; float: none; } .mod_search01 .sec.period { width: 290px; margin-right: 0; } .mod_search01 .sec .tit { margin-bottom: 18px; } .mod_search01 .sec .btnList .item label { padding: 2px 13px; } .mod_search01 .sec .btnList .item label:hover { background: #eee; } .mod_search01 .sec .date + .date { margin-top: 58px; } .mod_search01 .sec .date + .date:before { top: -38px; } .mod_search01 .submitBtns { clear: both; display: -webkit-box; display: -ms-flexbox; display: flex; width: 610px; padding-top: 30px; margin: 0 auto 0; } .mod_search01 .btnSubmit, .mod_search01 .btnClear { clear: both; width: 300px; height: 75px; margin: 0; } .mod_search01 .btnSubmit i, .mod_search01 .btnClear i { font-size: 1.8rem; } .mod_search01 .btnSubmit input, .mod_search01 .btnClear input { font-size: 1.8rem; font-weight: bold; cursor: pointer; } .mod_search01 .btnSubmit { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .mod_search01 .btnClear { margin-right: 10px; } } .mod_search02 { padding-bottom: 50px; border-bottom: 1px solid #ccc; } .mod_search02 .leadTit { margin-bottom: 25px; border-bottom-width: 1px; } .mod_search02 .sec + .sec { margin-top: 30px; } .mod_search02 .sec .tit { clear: both; margin-bottom: 13px; font-size: 1.5rem; font-weight: bold; } .mod_search02 .sec .tit span { padding-bottom: 3px; border-bottom: 3px solid #d04539; } .mod_search02 .sec .tit .sub { display: inline-block; margin-left: 10px; font-size: 1.3rem; } .mod_search02 .sec .calendar { padding: 10px 0 0; } .mod_search02 .sec .calendar .nav { overflow: hidden; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row; flex-flow: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mod_search02 .sec .calendar .nav .item { position: relative; } .mod_search02 .sec .calendar .nav .item i { position: absolute; top: 50%; color: #555; font-size: 2rem; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .mod_search02 .sec .calendar .nav .prev { padding: 0 0 0 20px; margin-right: 20px; } .mod_search02 .sec .calendar .nav .prev i { left: 0; } .mod_search02 .sec .calendar .nav .next { padding: 0 20px 0 0; margin-left: 20px; } .mod_search02 .sec .calendar .nav .next i { right: 0; } .mod_search02 .sec .calendar .navMonth { margin-bottom: 10px; padding: 3px 0 0; } .mod_search02 .sec .calendar .navMonth .now { font-size: 1.8rem; } .mod_search02 .sec .calendar .navWeek { margin-top: 10px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .mod_search02 .sec .calendar .table { table-layout: fixed; border-radius: 5px; box-sizing: border-box; border-collapse: separate; border-spacing: 0; } .mod_search02 .sec .calendar .table thead tr th:first-child { border-radius: 5px 0 0 0; border-left: 1px solid #ccc; } .mod_search02 .sec .calendar .table thead tr th:last-child { border-radius: 0 5px 0 0; } .mod_search02 .sec .calendar .table tbody tr td:first-child { border-radius: 0 0 0 5px; border-left: 1px solid #ccc; } .mod_search02 .sec .calendar .table tbody tr td:last-child { border-radius: 0 0 5px 0; } .mod_search02 .sec .calendar .table th, .mod_search02 .sec .calendar .table td { border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; vertical-align: middle; font-size: 1.4rem; text-align: center; } .mod_search02 .sec .calendar .table th { height: 35px; border-top: 1px solid #ccc; background: #eee; padding: 2px 0; } .mod_search02 .sec .calendar .table th.sunday, .mod_search02 .sec .calendar .table th.holiday { background: #EFC1C1; } .mod_search02 .sec .calendar .table th.saturday { background: #D1E1F0; } .mod_search02 .sec .calendar .table th .day { display: block; font-size: 1rem; } .mod_search02 .sec .calendar .table td label { display: block; position: relative; padding: 10px 0; } .mod_search02 .sec .calendar .table td label .txt { position: relative; font-weight: bold; } .mod_search02 .sec .calendar .table td label .txt span { font-size: 1.1rem; vertical-align: baseline; } .mod_search02 .sec .calendar .table td label input { display: none; } .mod_search02 .sec .calendar .table td label input:checked + .checkbox:before { position: absolute; content: ""; top: 45%; left: 50%; width: 10px; height: 5px; box-sizing: border-box; border-bottom: 1px solid #d04539; border-left: 1px solid #d04539; -webkit-transform: translate(-50%, -50%) rotate(-45deg); -ms-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } .mod_search02 .sec .calendar .table td label input:checked + .checkbox + .bg { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: rgba(208, 69, 57, 0.1); z-index: -1; } .mod_search02 .sec .calendar .table td label .checkbox { position: relative; display: block; width: 22px; height: 22px; margin: 0 auto; border: 1px solid #ccc; border-radius: 5px; background: #fff; box-sizing: border-box; } .mod_search02 .sec .calendar .note { margin-top: 10px; } .mod_search02 .sec .calendar .note .item { padding-left: 1em; text-indent: -1em; color: #d04539; font-size: 1.3rem; line-height: 1.38462; } .mod_search02 .sec .btnList { overflow: hidden; } .mod_search02 .sec .btnList .item { float: left; margin: 0 5px 10px 0; } .mod_search02 .sec .btnList .item label { display: block; padding: 2px 12px; border-radius: 5px; border: 1px solid #ccc; font-size: 1.3rem; cursor: pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .mod_search02 .sec .btnList .item input { display: none; } .mod_search02 .sec .btnList .item input:checked + label { border-color: #888; background: #888; color: #fff; } .mod_search02 .sec .date { position: relative; } .mod_search02 .sec .date i { position: absolute; top: 50%; right: 13px; font-size: 2.0rem; pointer-events: none; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .mod_search02 .sec .date input { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 40px; padding: 0 40px 0 15px; box-sizing: border-box; border-radius: 2px; border: 1px solid #ccc; font-size: 1.6rem; } .mod_search02 .sec .date + .date { margin-top: 40px; } .mod_search02 .sec .date + .date:before { position: absolute; content: ""; top: -36px; left: 50%; width: 2px; height: 30px; background: rgba(0, 0, 0, 0.5); } .mod_search02 .sec .keyword { position: relative; display: block; padding-right: 45px; box-sizing: border-box; } .mod_search02 .sec .keyword .txt { position: relative; background: #fff; border-radius: 2px; } .mod_search02 .sec .keyword .txt input[type="text"] { display: block; width: 100%; height: 40px; padding: 10px; border: 1px solid #ccc; border-radius: 2px; box-sizing: border-box; font-size: 1.6rem; } .mod_search02 .sec .keyword .btn { position: absolute; top: 0; right: 0; width: 40px; height: 40px; padding-top: 8px; border-radius: 2px; background: #d04539; box-sizing: border-box; text-align: center; cursor: pointer; } .mod_search02 .sec .keyword .btn i { font-size: 2.4rem; } .mod_search02 .sec .keyword .btn i:before { color: #fff; } .mod_search02 .btnSubmit { position: relative; width: 200px; height: 50px; margin: 30px auto 0; } .mod_search02 .btnSubmit i { position: absolute; top: 50%; right: 15px; color: #fff; font-size: 1.7rem; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .mod_search02 .btnSubmit input { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 100%; border-radius: 0; outline: 0; background: #d04539; color: #fff; font-size: 1.2rem; } .mod_search02 .btnClear { position: relative; width: 200px; height: 50px; margin: 15px auto 0; } .mod_search02 .btnClear i { position: absolute; top: 50%; right: 15px; color: #d04539; font-size: 1.7rem; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .mod_search02 .btnClear input { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 100%; border-radius: 0; outline: 0; background: #fff; color: #d04539; font-size: 1.2rem; border: 1px solid; } @media all and (min-width: 1120px) { .mod_search02 { width: 960px; margin: 0 auto; padding-bottom: 30px; } .mod_search02.is_col02 .sec.area, .mod_search02.is_col02 .sec.genre { width: 470px; } .mod_search02.is_col02 .sec.area + .sec, .mod_search02.is_col02 .sec.genre + .sec { margin-right: 0; } .mod_search02 .form { overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; margin-left: -25px; margin-right: -25px; } .mod_search02 .form.grid3 { margin-left: -15px; margin-right: -15px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .mod_search02 .sec { width: -webkit-calc(50% - 50px); width: calc(50% - 50px); margin: 0 25px 20px; } .mod_search02 .sec + .sec { margin-top: 0; } .mod_search02 .sec.keywords { width: 100%; float: none; } .mod_search02 .sec:nth-child(3n) { margin-right: 0; } .mod_search02 .sec.period { width: 290px; margin-right: 0; } .mod_search02 .sec.vacancy label { cursor: pointer; } .mod_search02 .sec.vacancy .nav .prev, .mod_search02 .sec.vacancy .nav .next { cursor: pointer; } .mod_search02 .sec.vacancy .nav .prev:hover, .mod_search02 .sec.vacancy .nav .next:hover { text-decoration: underline; } .mod_search02 .sec .tit { margin-bottom: 18px; } .mod_search02 .sec .calendar { padding: 0; } .mod_search02 .sec .btnList .item label { padding: 2px 13px; } .mod_search02 .sec .btnList .item label:hover { background: #eee; } .mod_search02 .sec .date + .date { margin-top: 58px; } .mod_search02 .sec .date + .date:before { top: -44px; } .mod_search02 .submitBtns { clear: both; display: -webkit-box; display: -ms-flexbox; display: flex; width: 610px; padding-top: 30px; margin: 0 auto 0; } .mod_search02 .btnSubmit, .mod_search02 .btnClear { clear: both; width: 300px; height: 75px; margin: 0; } .mod_search02 .btnSubmit i, .mod_search02 .btnClear i { font-size: 1.8rem; } .mod_search02 .btnSubmit input, .mod_search02 .btnClear input { font-size: 1.8rem; font-weight: bold; cursor: pointer; } .mod_search02 .btnSubmit { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .mod_search02 .btnClear { margin-right: 10px; } .mod_search02 .form.grid3 .sec { width: 33%; margin: 0 15px 20px; } .mod_search02 .form.grid3 .sec.genre { width: 226px; } } @keyframes fade-in { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } /* mixin for multiline */ /* faq ================================================ */ .mod_faq01 .que { position: relative; padding: 30px 20px 22px 48px; background: #eee; font-size: 1.4rem; font-weight: bold; line-height: 1.5; } .mod_faq01 .que:before, .mod_faq01 .que:after { position: absolute; } .mod_faq01 .que:before { content: ""; top: 30px; left: 12px; width: 28px; height: 28px; border: 1px solid #d04539; box-sizing: border-box; border-radius: 50%; } .mod_faq01 .que:after { content: "Q"; top: 35px; left: 22px; color: #d04539; font-weight: bold; } .mod_faq01 .ans { position: relative; padding: 20px 20px 18px 48px; font-size: 1.4rem; line-height: 1.5; } .mod_faq01 .ans strong { font-weight: bold; color: #d04539; } .mod_faq01 .ans:before, .mod_faq01 .ans:after { position: absolute; } .mod_faq01 .ans:before { content: ""; top: 22px; left: 12px; width: 28px; height: 28px; border-radius: 50%; background: #d04539; } .mod_faq01 .ans:after { content: "A"; color: #fff; font-weight: bold; top: 26px; left: 21px; } @media all and (min-width: 1120px) { .mod_faq01 { width: 772px; margin-right: auto; margin-left: auto; } .mod_faq01 .que { padding: 38px 40px 37px 120px; font-size: 1.6rem; } .mod_faq01 .que:before { left: 43px; width: 40px; height: 40px; } .mod_faq01 .que:after { top: 35px; left: 55px; font-size: 2.0rem; } .mod_faq01 .ans { padding: 32px 40px 60px 120px; font-size: 1.5rem; line-height: 1.53333; } .mod_faq01 .ans:before { top: 35px; left: 43px; width: 40px; height: 40px; } .mod_faq01 .ans:after { top: 38px; left: 55px; font-size: 2.0rem; } } .mod_faq02 .mod_faq02__item { position: relative; margin-bottom: 10px; border-radius: 4px; overflow: hidden; } .mod_faq02 .mod_faq02__label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row; flex-flow: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; background: #EEEEEE; color: #333; font-size: 1.2rem; font-weight: bold; position: relative; padding: 12px; height: 40px; box-sizing: border-box; } @media all and (min-width: 600px) { .mod_faq02 .mod_faq02__label { height: 70px; font-size: 1.6rem; padding: 12px 30px 12px; } } .mod_faq02 .mod_faq02__label:after { display: block; content: ''; width: 40px; height: 40px; background: #E8E8E8; position: absolute; top: 0; right: 0; color: #333; } @media all and (min-width: 600px) { .mod_faq02 .mod_faq02__label:after { width: 70px; height: 70px; } } .mod_faq02 .mod_faq02__label:before { display: block; width: 14px; height: 10px; content: ''; position: absolute; top: 50%; right: 14px; z-index: 3; width: 0; height: 0; border-style: solid; border-width: 0 7px 10px 7px; border-color: transparent transparent #d04539 transparent; -webkit-transform: translateY(-50%) rotate(-180deg); -ms-transform: translateY(-50%) rotate(-180deg); transform: translateY(-50%) rotate(-180deg); -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media all and (min-width: 600px) { .mod_faq02 .mod_faq02__label:before { right: 28px; } } .mod_faq02 .mod_faq02__toggle { display: none; } .mod_faq02 .mod_faq02__content { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; max-height: 0; height: 0; overflow: hidden; background: #EEEEEE; padding: 0 12px; box-sizing: border-box; border-top: solid 1px transparent; } @media all and (min-width: 600px) { .mod_faq02 .mod_faq02__content { padding: 0 50px; } } .mod_faq02 .mod_faq02__toggle:checked + .mod_faq02__label:before { -webkit-transform: translateY(-50%) rotate(0deg); -ms-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); } .mod_faq02 .mod_faq02__toggle:checked + .mod_faq02__label + .mod_faq02__content { max-height: 9999px; height: auto; border-top: solid 1px #F7F7F7; padding: 10px 12px; box-sizing: border-box; } @media all and (min-width: 600px) { .mod_faq02 .mod_faq02__toggle:checked + .mod_faq02__label + .mod_faq02__content { padding: 20px 50px 40px; } } .mod_faq02 .mod_faq02__label { text-align: left; padding-right: 40px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } @media all and (min-width: 600px) { .mod_faq02 .mod_faq02__label { padding-right: 70px; } } @media all and (min-width: 600px) { .mod_faq02 .mod_faq02__content { padding: 0 30px; } } .mod_faq02 .mod_faq02__toggle:checked + .mod_faq02__label + .mod_faq02__content { background: #F7F7F7; } @media all and (min-width: 600px) { .mod_faq02 .mod_faq02__toggle:checked + .mod_faq02__label + .mod_faq02__content { padding: 20px 30px 30px; } } .mod_faq02__q { display: block; position: relative; padding-left: 35px; } .mod_faq02__q:before { position: absolute; content: ""; top: 50%; left: 0; width: 28px; height: 28px; border: 1px solid #d04539; box-sizing: border-box; border-radius: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .mod_faq02__q:after { position: absolute; content: "Q"; top: 50%; left: 8px; color: #d04539; font-weight: bold; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 1.5rem; } .mod_faq02__ans { position: relative; display: block; padding-left: 35px; } .mod_faq02__ans:before { position: absolute; content: ""; top: 0; left: 0; width: 28px; height: 28px; background: #d04539; box-sizing: border-box; border-radius: 50%; } .mod_faq02__ans:after { position: absolute; content: "A"; top: 2px; left: 8px; color: #fff; font-weight: bold; } @keyframes fade-in { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } /* mixin for multiline */ /* articles ================================================ */ .mod_articles01 .book_label { display: inline-block; border: 1px solid #d04539; padding: 2px 6px 1px; color: #d04539; font-size: 1.1rem; margin-bottom: 10px; margin-top: 5px; } @media all and (min-width: 600px) { .mod_articles01 .book_label { margin-top: 0; } } .mod_articles01 > .item { position: relative; box-shadow: 0 0 40px rgba(0, 0, 0, 0.16); background: #fff; margin-bottom: 10px; } .mod_articles01 > .item .itemIn { overflow: hidden; display: block; padding: 20px; } .mod_articles01 > .item a { text-decoration: none; } .mod_articles01 > .item .areaImg { float: left; width: 85px; height: 85px; background: #ccc; } .mod_articles01 > .item .areaImg .label { position: absolute; top: 0; left: 0; width: 100%; z-index: 3; } .mod_articles01 > .item .areaImg .label .item { display: inline-block; width: 122px; margin: 0 1px 1px 0; padding: 6px 9px; box-sizing: border-box; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 1.3rem; text-align: center; } .mod_articles01 > .item .areaImg .label .item.prize { width: auto; background: #d04539; } .mod_articles01 > .item .areaImg .label .item.end { background: #000; width: 72px; } .mod_articles01 > .item .areaImg .label .item.nearEnd { background: #000; } .mod_articles01 > .item .areaImg img { width: 85px; height: 85px; object-fit: contain; font-family: 'object-fit: contain;'; } .mod_articles01 > .item .areaTxt { padding-left: 95px; } .mod_articles01 > .item .areaTxt .cat { display: inline-block; margin: 0 5px 5px 0; } .mod_articles01 > .item .areaTxt .cat a { padding: 3px 6px; background: #d04539; color: #fff; font-size: 1.1rem; } .mod_articles01 > .item .areaTxt .time { margin: 5px 0 3px; color: #555; font-size: 1.3rem; } .mod_articles01 > .item .areaTxt .tit a { font-weight: bold; } .mod_articles01 > .item .areaTxt .tags { overflow: hidden; padding-right: 20px; } .mod_articles01 > .item .areaTxt .tags .item { float: left; margin-right: 5px; } .mod_articles01 > .item .areaTxt .tags .item a { color: #ccc; font-size: 1.4rem; line-height: 1.42857; } .mod_articles01 > .item .areaFavorite { position: absolute; bottom: 12px; right: 18px; z-index: 1; } .mod_articles01 > .item .areaFavorite i { color: #d04539; font-size: 2.4rem; } .mod_articles01 > .item + .item { margin-top: 10px; } @media all and (min-width: 600px) { .mod_articles01 > .item { float: left; width: 49%; margin: 0 2% 2% 0; } .mod_articles01 > .item:nth-child(even) { margin-right: 0; } .mod_articles01 > .item + .item { margin-top: 0; } } @media all and (min-width: 1120px) { .mod_articles01 > .item { width: 32%; margin: 0 2% 2% 0; } .mod_articles01 > .item + .item { margin: 0 2% 2% 0; } .mod_articles01 > .item:nth-child(3n) { margin-right: 0; } .mod_articles01 > .item .itemIn { padding: 0; } .mod_articles01 > .item a:hover { text-decoration: underline; } .mod_articles01 > .item .areaImg { float: none; width: 100%; height: 240px; position: relative; } .mod_articles01 > .item .areaImg img { width: 100%; height: 240px; object-fit: contain; font-family: 'object-fit: contain;'; } .mod_articles01 > .item .areaImg .label .item { width: auto; min-width: 122px; } .mod_articles01 > .item .areaTxt { padding: 20px 25px; } .mod_articles01 > .item .areaTxt .cat a { padding: 4px 17px; font-size: 1.3rem; font-weight: bold; } .mod_articles01 > .item .areaTxt .cat a:hover { text-decoration: none; } .mod_articles01 > .item .areaTxt .time { font-size: 1.4rem; } .mod_articles01 > .item .areaTxt .tit { margin-bottom: 7px; font-size: 1.6rem; } .mod_articles01 > .item .areaTxt .tags .item { margin-right: 0.5em; } .mod_articles01 > .item .areaFavorite { right: 25px; } .mod_articles01 > .item .areaFavorite i { font-size: 2.6rem; } } .mod_articles02 > .item { position: relative; box-shadow: 0 0 40px rgba(0, 0, 0, 0.16); background: #fff; } .mod_articles02 > .item .itemIn { overflow: hidden; display: block; padding: 20px; } .mod_articles02 > .item a { text-decoration: none; } .mod_articles02 > .item .areaImg { float: left; width: 85px; height: 85px; background: #ccc; } .mod_articles02 > .item .label { width: 100%; } .mod_articles02 > .item .label .item { display: inline-block; margin: 0 1px 1px 0; padding: 6px 9px; box-sizing: border-box; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 1.3rem; text-align: center; } .mod_articles02 > .item .label .item.prize { width: auto; background: #d04539; } .mod_articles02 > .item .areaTxt { padding-left: 95px; } .mod_articles02 > .item .areaTxt .cat { display: inline-block; margin: 0 5px 5px 0; } .mod_articles02 > .item .areaTxt .cat a { display: block; padding: 3px 6px; background: #d04539; color: #fff; font-size: 1.1rem; } .mod_articles02 > .item .areaTxt .time { margin: 5px 0 3px; color: #555; font-size: 1.3rem; } .mod_articles02 > .item .areaTxt .tit a { font-weight: bold; } .mod_articles02 > .item .areaTxt .tags { overflow: hidden; padding-right: 20px; } .mod_articles02 > .item .areaTxt .tags .item { float: left; margin-right: 5px; } .mod_articles02 > .item .areaTxt .tags .item a { color: #ccc; font-size: 1.4rem; line-height: 1.42857; } .mod_articles02 > .item .areaFavorite { position: absolute; bottom: 12px; right: 18px; z-index: 1; } .mod_articles02 > .item .areaFavorite i { color: #d04539; font-size: 2.4rem; } .mod_articles02 > .item + .item { margin-top: 10px; } @media all and (min-width: 600px) { .mod_articles02 > .item { float: left; width: 49%; margin: 0 2% 2% 0; } .mod_articles02 > .item:nth-child(even) { margin-right: 0; } .mod_articles02 > .item + .item { margin-top: 0; } } @media all and (min-width: 1120px) { .mod_articles02 > .item a:hover { text-decoration: underline; } .mod_articles02 > .item .areaImg { overflow: hidden; width: 115px; height: 115px; } .mod_articles02 > .item .areaTxt { padding-left: 135px; } .mod_articles02 > .item .areaTxt .cat a { padding: 3px 17px 2px; font-size: 1.3rem; font-weight: bold; } .mod_articles02 > .item .areaTxt .cat a:hover { text-decoration: none; } .mod_articles02 > .item .areaTxt .time { font-size: 1.4rem; } .mod_articles02 > .item .areaTxt .tit { margin-bottom: 7px; } .mod_articles02 > .item .areaTxt .tit a { font-size: 1.6rem; } .mod_articles02 > .item .areaTxt .tags .item { margin-right: 0.5em; } .mod_articles02 > .item .areaFavorite { right: 25px; } .mod_articles02 > .item .areaFavorite i { font-size: 2.6rem; } } .mod_articles03 > .item { position: relative; box-shadow: 0 0 40px rgba(0, 0, 0, 0.16); background: #fff; } .mod_articles03 > .item .itemIn { overflow: hidden; display: block; padding: 20px; } .mod_articles03 > .item a { text-decoration: none; } .mod_articles03 > .item .areaImg { overflow: hidden; position: relative; float: left; width: 115px; height: 115px; margin: 0 10px 10px 0; background: #ccc; } .mod_articles03 > .item .label { width: 100%; } .mod_articles03 > .item .label .item { display: inline-block; margin: 0 1px 1px 0; padding: 6px 9px; box-sizing: border-box; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 1.3rem; text-align: center; } .mod_articles03 > .item .label .item.prize { width: auto; background: #d04539; } .mod_articles03 > .item .areaTxt .cat { display: inline-block; min-width: 50px; margin: 0 5px 5px 0; } .mod_articles03 > .item .areaTxt .cat a { padding: 3px 6px; box-sizing: border-box; background: #d04539; color: #fff; font-size: 1.1rem; text-align: center; } .mod_articles03 > .item .areaTxt .tit { margin-top: 3px; } .mod_articles03 > .item .areaTxt .tit a { font-weight: bold; } .mod_articles03 > .item .areaTxt .tags { clear: both; overflow: hidden; padding-right: 20px; } .mod_articles03 > .item .areaTxt .tags .item { float: left; margin-right: 5px; } .mod_articles03 > .item .areaTxt .tags .item a { color: #ccc; font-size: 1.4rem; line-height: 1.42857; } .mod_articles03 > .item .areaFavorite { position: absolute; bottom: 12px; right: 18px; z-index: 1; } .mod_articles03 > .item .areaFavorite i { color: #d04539; font-size: 2.4rem; } .mod_articles03 > .item + .item { margin-top: 10px; } @media all and (min-width: 600px) { .mod_articles03 > .item { float: left; width: 49%; margin: 0 2% 2% 0; } .mod_articles03 > .item:nth-child(even) { margin-right: 0; } .mod_articles03 > .item + .item { margin-top: 0; } } @media all and (min-width: 1120px) { .mod_articles03 > .item { width: 32%; margin: 0 2% 2% 0; } .mod_articles03 > .item + .item { margin: 0 2% 2% 0; } .mod_articles03 > .item:nth-child(3n) { margin-right: 0; } .mod_articles03 > .item .itemIn { padding: 0; } .mod_articles03 > .item a:hover { text-decoration: underline; } .mod_articles03 > .item .areaImg { float: none; width: 100%; height: 240px; margin: 0; } .mod_articles03 > .item .label { position: absolute; top: 0; left: 0; z-index: 3; } .mod_articles03 > .item .label .item { width: auto; min-width: 122px; } .mod_articles03 > .item .areaTxt { padding: 20px 25px; } .mod_articles03 > .item .areaTxt .cat a { padding: 4px 17px; font-size: 1.3rem; font-weight: bold; } .mod_articles03 > .item .areaTxt .cat a:hover { text-decoration: none; } .mod_articles03 > .item .areaTxt .time { font-size: 1.4rem; } .mod_articles03 > .item .areaTxt .tit { margin-bottom: 7px; } .mod_articles03 > .item .areaTxt .tit a { font-size: 1.6rem; } .mod_articles03 > .item .areaTxt .tags .item { margin-right: 0.5em; } .mod_articles03 > .item .areaFavorite { right: 25px; } .mod_articles03 > .item .areaFavorite i { font-size: 2.6rem; } } .mod_articles04.is_mb { margin-bottom: 30px; } .mod_articles04 > .item { position: relative; box-shadow: 0 0 40px rgba(0, 0, 0, 0.16); background: #fff; } .mod_articles04 > .item .itemIn { overflow: hidden; display: block; } .mod_articles04 > .item a { text-decoration: none; } .mod_articles04 > .item .areaImg { position: relative; } .mod_articles04 > .item .areaImg .label { position: absolute; top: 0; left: 0; width: 100%; z-index: 3; } .mod_articles04 > .item .areaImg .label .item { display: inline-block; width: 122px; margin: 0 1px 1px 0; padding: 6px 9px; box-sizing: border-box; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 1.3rem; text-align: center; } .mod_articles04 > .item .areaImg .label .item.prize { width: auto; background: #d04539; } .mod_articles04 > .item .areaImg .gloryLabel { position: absolute; left: 5px; bottom: 5px; z-index: 3; } .mod_articles04 > .item .areaImg .gloryLabel .item { display: inline-block; padding: 5px 10px 3px; line-height: 1; font-size: 1.3rem; background: #fff; color: #d04539; border-radius: 5px; } .mod_articles04 > .item .areaImg .gloryLabel .item .icon { display: inline-block; vertical-align: middle; margin-right: 2px; font-size: 1.4rem; } .mod_articles04 > .item .areaTxt { position: relative; padding: 20px 25px; } .mod_articles04 > .item .areaTxt .cat { display: inline-block; min-width: 60px; margin: 0 5px 5px 0; } .mod_articles04 > .item .areaTxt .cat a { padding: 4px 6px; box-sizing: border-box; background: #d04539; color: #fff; font-size: 1.3rem; text-align: center; } .mod_articles04 > .item .areaTxt .tit { margin: 5px 0 8px; font-weight: bold; } .mod_articles04 > .item .areaTxt .tags { overflow: hidden; padding-right: 20px; } .mod_articles04 > .item .areaTxt .tags .item { float: left; margin-right: 5px; } .mod_articles04 > .item .areaTxt .tags .item a { color: #ccc; font-size: 1.4rem; line-height: 1.42857; } .mod_articles04 > .item .areaFavorite { position: absolute; bottom: 12px; right: 18px; z-index: 1; } .mod_articles04 > .item .areaFavorite i { color: #d04539; font-size: 2.4rem; } .mod_articles04 > .item + .item { margin-top: 10px; } @media all and (min-width: 600px) { .mod_articles04.is_mb { margin-bottom: 60px; } .mod_articles04 > .item + .item { margin-top: 20px; } .mod_articles04 > .item .areaImg { float: left; width: 48.4%; } .mod_articles04 > .item .areaTxt { float: right; width: 51.6%; box-sizing: border-box; } .mod_articles04 > .item .areaTxt .tags { position: absolute; left: 25px; } .mod_articles04 > .item .areaTxt .tags01 { bottom: 50px; } .mod_articles04 > .item .areaTxt .tags02 { bottom: 20px; } } @media all and (min-width: 1120px) { .mod_articles04 > .item .itemIn { padding: 0; } .mod_articles04 > .item a:hover { text-decoration: underline; } .mod_articles04 > .item .areaTxt { padding: 46px 20px 20px 23px; } .mod_articles04 > .item .areaTxt .cat a { padding: 4px 17px; font-size: 1.3rem; font-weight: bold; } .mod_articles04 > .item .areaTxt .cat a:hover { text-decoration: none; } .mod_articles04 > .item .areaTxt .tit { margin-bottom: 7px; font-size: 1.6rem; } .mod_articles04 > .item .areaTxt .tags { padding-right: 50px; } .mod_articles04 > .item .areaTxt .tags .item { margin-right: 0.5em; } .mod_articles04 > .item .areaTxt .tags01 { bottom: 75px; } .mod_articles04 > .item .areaTxt .tags02 { bottom: 26px; } .mod_articles04 > .item .areaFavorite { right: 25px; } .mod_articles04 > .item .areaFavorite i { font-size: 2.6rem; } } .mod_articles05 > .item { position: relative; box-shadow: 0 0 40px rgba(0, 0, 0, 0.16); background: #fff; } .mod_articles05 > .item .itemIn { overflow: hidden; display: block; } .mod_articles05 > .item .itemIn .change_cancel_info { color: #d04539; margin-top: 5px; } .mod_articles05 > .item a { display: block; text-decoration: none; } .mod_articles05 > .item .areaImg { position: relative; height: 220px; background: #ccc; } .mod_articles05 > .item .areaImg .label { position: absolute; top: 0; left: 0; width: 100%; z-index: 3; } .mod_articles05 > .item .areaImg .label .item { display: inline-block; width: 122px; margin: 0 1px 1px 0; padding: 6px 9px; box-sizing: border-box; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 1.3rem; text-align: center; } .mod_articles05 > .item .areaImg .label .item.prize { width: auto; background: #d04539; } .mod_articles05 > .item .areaImg .label .item.end { background: #000; width: 72px; } .mod_articles05 > .item .areaImg .label .item.nearEnd { background: #000; } .mod_articles05 > .item .areaImg a img { width: 100%; height: 220px; object-fit: contain; font-family: 'object-fit: contain;'; } .mod_articles05 > .item .headline { position: relative; margin: 5px 0 8px; } .mod_articles05 > .item .areaIco { width: 70px; height: 70px; position: absolute; bottom: -13px; right: 13px; border-radius: 50%; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); text-align: center; background: #fff; } .mod_articles05 > .item .areaIco .icoImage { margin: 0; height: 36px; line-height: 36px; display: table; vertical-align: bottom; width: 100%; } .mod_articles05 > .item .areaIco .icoImage img { width: 25px; } .mod_articles05 > .item .areaIco .icoImage i { color: #8DBF4B; display: inline-block; } .mod_articles05 > .item .areaIco .icoImage i:before { font-size: 2.5rem; } .mod_articles05 > .item .areaIco .icoImage i.is_color02 { color: #FCC100; } .mod_articles05 > .item .areaIco .icoImage i.is_color03 { color: #F67F16; } .mod_articles05 > .item .areaIco .icoImage i.is_color04 { color: #E30000; } .mod_articles05 > .item .areaIco .icoImage i.is_color05 { color: #85522D; } .mod_articles05 > .item .areaIco .icoImage i.is_color_tsutsuji { color: #EA74C7; } .mod_articles05 > .item .areaIco .icoImage i.is_color_flowers { color: #E5829A; } .mod_articles05 > .item .areaIco .icoImage i.is_color_ume { color: #E2437B; } .mod_articles05 > .item .areaIco .icoImage i.is_color_end { color: #eee; } .mod_articles05 > .item .areaIco .note { display: table; height: 26px; line-height: 26px; width: 100%; font-size: 1.2rem; } .mod_articles05 > .item .areaIco .note span { display: table-cell; line-height: 13px; vertical-align: middle; } .mod_articles05 > .item .areaIco:nth-of-type(2) { right: 94px; } .mod_articles05 > .item .areaIco:nth-of-type(3) { right: 176px; } .mod_articles05 > .item .themeIco { position: absolute; bottom: 11px; left: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; } .mod_articles05 > .item .themeIco .item { height: 25px; margin-right: 5px; } .mod_articles05 > .item .themeIco .item img { height: 100%; width: auto; } .mod_articles05 > .item .areaTxt { position: relative; padding: 20px 25px; } .mod_articles05 > .item .areaTxt .cat { display: inline-block; min-width: 60px; margin: 0 5px 5px 0; } .mod_articles05 > .item .areaTxt .cat.is_white { min-width: auto; } .mod_articles05 > .item .areaTxt .cat.is_white a { color: #d04539; border: 1px solid #d04539; background: #fff; } .mod_articles05 > .item .areaTxt .cat a { padding: 4px 6px; box-sizing: border-box; background: #d04539; color: #fff; font-size: 1.3rem; text-align: center; } .mod_articles05 > .item .areaTxt .tit { margin: 0 0 5px; padding: 3px 0 0; font-weight: bold; } .mod_articles05 > .item .areaTxt .highlights { font-size: 1.3rem; color: #ACACAC; } .mod_articles05 > .item .areaTxt .time { ze: 1.3rem; color: #ACACAC; } .mod_articles05 > .item .areaTxt .time font-si .highlights { font-size: 1.4rem; position: absolute; top: 0; left: 0; } .mod_articles05 > .item .areaTxt .system .item { display: inline-block; margin: 0 3px 3px 0; padding: 2px; font-size: 1.2rem; color: #d04539; border: 1px solid; } .mod_articles05 > .item .areaTxt .tags { overflow: hidden; padding-right: 20px; } .mod_articles05 > .item .areaTxt .tags .item { float: left; margin-right: 5px; } .mod_articles05 > .item .areaTxt .tags .item a { color: #ccc; font-size: 1.4rem; line-height: 1.42857; } .mod_articles05 > .item .areaTxt .access { display: table; width: 100%; margin: 0 0 20px; } .mod_articles05 > .item .areaTxt .access .ico { display: teble-cell; vertical-align: top; width: 35px; } .mod_articles05 > .item .areaTxt .access .ico i { font-size: 2.3rem; color: #888; } .mod_articles05 > .item .areaTxt .access .note { display: table-cell; font-size: 1.3rem; } .mod_articles05 > .item .areaFavorite { position: absolute; bottom: 12px; right: 18px; z-index: 1; } .mod_articles05 > .item .areaFavorite i { color: #d04539; font-size: 2.4rem; } .mod_articles05 > .item + .item { margin-top: 10px; } @media all and (min-width: 600px) { .mod_articles05 > .item { float: left; width: 49%; margin: 0 2% 2% 0; } .mod_articles05 > .item:nth-child(even) { margin-right: 0; } .mod_articles05 > .item + .item { margin-top: 0; } } @media all and (min-width: 1120px) { .mod_articles05 > .item { width: 32%; margin: 0 2% 2% 0; } .mod_articles05 > .item + .item { margin: 0 2% 2% 0; } .mod_articles05 > .item:nth-child(3n) { margin-right: 0; } .mod_articles05 > .item .itemIn { padding: 0; } .mod_articles05 > .item a:hover { text-decoration: underline; } .mod_articles05 > .item .areaImg { float: none; width: 100%; height: 240px; margin: 0; } .mod_articles05 > .item .areaImg a { overflow: hidden; height: 240px; } .mod_articles05 > .item .areaImg a img { height: 240px; } .mod_articles05 > .item .areaImg .label .item { width: auto; min-width: 122px; } .mod_articles05 > .item .areaIco { width: 87px; height: 87px; position: absolute; bottom: -13px; right: 24px; border-radius: 50%; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } .mod_articles05 > .item .areaIco .icoImage { margin: 0; height: 44px; line-height: 44px; display: table; vertical-align: bottom; width: 100%; } .mod_articles05 > .item .areaIco .icoImage img { width: 31px; } .mod_articles05 > .item .areaIco .icoImage i { display: inline-block; } .mod_articles05 > .item .areaIco .icoImage i:before { font-size: 3.1rem; } .mod_articles05 > .item .areaIco .note { display: table; height: 35px; line-height: 35px; width: 100%; } .mod_articles05 > .item .areaIco .note span { display: table-cell; line-height: 16px; vertical-align: middle; } .mod_articles05 > .item .areaIco:nth-of-type(2) { right: 137px; } .mod_articles05 > .item .areaIco:nth-of-type(3) { right: auto; left: 24px; } .mod_articles05 > .item .headline { margin: 8px 0 10px; padding: 0 0 0; } .mod_articles05 > .item .headline.is_jourmey { padding-top: 0; } .mod_articles05 > .item .areaTxt { padding: 20px 25px; } .mod_articles05 > .item .areaTxt .cat a { padding: 4px 17px; font-size: 1.3rem; font-weight: bold; } .mod_articles05 > .item .areaTxt .cat a:hover { text-decoration: none; } .mod_articles05 > .item .areaTxt .time { font-size: 1.4rem; } .mod_articles05 > .item .areaTxt .ico { border-radius: 50%; background: #fff; } .mod_articles05 > .item .areaTxt .highlights { font-size: 1.4rem; position: relative; } .mod_articles05 > .item .areaTxt .tit { margin-bottom: 7px; } .mod_articles05 > .item .areaTxt .tit a { font-size: 1.6rem; } .mod_articles05 > .item .areaTxt .tags .item { margin-right: 0.5em; } .mod_articles05 > .item .areaFavorite { right: 25px; } .mod_articles05 > .item .areaFavorite i { font-size: 2.6rem; } } .mod_articles06 > .item { position: relative; box-shadow: 0 0 40px rgba(0, 0, 0, 0.16); background: #fff; } .mod_articles06 > .item .itemIn { overflow: hidden; display: block; } .mod_articles06 > .item a { text-decoration: none; } .mod_articles06 > .item .areaImg { display: none; } .mod_articles06 > .item .label { width: 100%; } .mod_articles06 > .item .label .item { display: inline-block; width: 122px; margin: 0 1px 1px 0; padding: 6px 9px; box-sizing: border-box; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 1.3rem; text-align: center; } .mod_articles06 > .item .label .item.prize { width: auto; background: #d04539; } .mod_articles06 > .item .headline { position: relative; margin: 5px 0 8px; } .mod_articles06 > .item .areaIco { width: 70px; height: 70px; position: absolute; bottom: -13px; right: 13px; border-radius: 50%; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); text-align: center; background: #fff; } .mod_articles06 > .item .areaIco .icoImage { margin: 0; height: 36px; line-height: 36px; display: table; vertical-align: bottom; width: 100%; } .mod_articles06 > .item .areaIco .icoImage img { width: 25px; } .mod_articles06 > .item .areaIco .icoImage i { color: #8DBF4B; display: inline-block; } .mod_articles06 > .item .areaIco .icoImage i:before { font-size: 2.5rem; } .mod_articles06 > .item .areaIco .icoImage i.is_color02 { color: #FCC100; } .mod_articles06 > .item .areaIco .icoImage i.is_color03 { color: #F67F16; } .mod_articles06 > .item .areaIco .icoImage i.is_color04 { color: #E30000; } .mod_articles06 > .item .areaIco .icoImage i.is_color05 { color: #85522D; } .mod_articles06 > .item .areaIco .icoImage i.is_color_tsutsuji { color: #EA74C7; } .mod_articles06 > .item .areaIco .icoImage i.is_color_flowers { color: #E5829A; } .mod_articles06 > .item .areaIco .icoImage i.is_color_ume { color: #E2437B; } .mod_articles06 > .item .areaIco .icoImage i.is_color_end { color: #eee; } .mod_articles06 > .item .areaIco .note { display: table; height: 26px; line-height: 26px; width: 100%; font-size: 1.2rem; } .mod_articles06 > .item .areaIco .note span { display: table-cell; line-height: 13px; vertical-align: middle; } .mod_articles06 > .item .areaIco:nth-of-type(2) { right: 94px; } .mod_articles06 > .item .areaIco:nth-of-type(3) { right: 176px; } .mod_articles06 > .item .areaTxt { position: relative; padding: 10px 25px 20px; } .mod_articles06 > .item .areaTxt .cat { display: inline-block; min-width: 60px; margin: 0 5px 5px 0; } .mod_articles06 > .item .areaTxt .cat a { padding: 4px 6px; box-sizing: border-box; background: #d04539; color: #fff; font-size: 1.3rem; text-align: center; } .mod_articles06 > .item .areaTxt .tit { margin: 0 0 5px; padding: 3px 0 0; font-weight: bold; } .mod_articles06 > .item .areaTxt .highlights { font-size: 1.3rem; color: #ACACAC; } .mod_articles06 > .item .areaTxt .tags { w: hidden; padding-right: 20px; } .mod_articles06 > .item .areaTxt .tags overflo .highlights { font-size: 1.4rem; position: absolute; top: 0; left: 0; } .mod_articles06 > .item .areaTxt .tags .item { float: left; margin-right: 5px; } .mod_articles06 > .item .areaTxt .tags .item a { color: #ccc; font-size: 1.4rem; line-height: 1.42857; } .mod_articles06 > .item .areaTxt .access { display: table; width: 100%; margin: 0 0 20px; } .mod_articles06 > .item .areaTxt .access .ico { display: teble-cell; vertical-align: top; width: 35px; } .mod_articles06 > .item .areaTxt .access .ico i { font-size: 2.3rem; color: #888; } .mod_articles06 > .item .areaTxt .access .note { display: table-cell; font-size: 1.3rem; } .mod_articles06 > .item .areaFavorite { position: absolute; bottom: 12px; right: 18px; z-index: 1; } .mod_articles06 > .item .areaFavorite i { color: #d04539; font-size: 2.4rem; } .mod_articles06 > .item + .item { margin-top: 10px; } @media all and (min-width: 600px) { .mod_articles06 > .item { float: left; width: 49%; margin: 0 2% 2% 0; } .mod_articles06 > .item:nth-child(even) { margin-right: 0; } .mod_articles06 > .item + .item { margin-top: 0; } } @media all and (min-width: 1120px) { .mod_articles06 > .item .itemIn { padding: 0; } .mod_articles06 > .item a:hover { text-decoration: underline; } .mod_articles06 > .item .label .item { width: auto; min-width: 122px; } .mod_articles06 > .item .areaIco { width: 87px; height: 87px; position: absolute; bottom: -13px; right: 24px; border-radius: 50%; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } .mod_articles06 > .item .areaIco .icoImage { margin: 0; height: 44px; line-height: 44px; display: table; vertical-align: bottom; width: 100%; } .mod_articles06 > .item .areaIco .icoImage img { width: 31px; } .mod_articles06 > .item .areaIco .icoImage i { display: inline-block; } .mod_articles06 > .item .areaIco .icoImage i:before { font-size: 3.1rem; } .mod_articles06 > .item .areaIco .note { display: table; height: 35px; line-height: 35px; width: 100%; } .mod_articles06 > .item .areaIco .note span { display: table-cell; line-height: 16px; vertical-align: middle; } .mod_articles06 > .item .areaIco:nth-of-type(2) { right: 137px; } .mod_articles06 > .item .areaIco:nth-of-type(3) { right: auto; left: 24px; } .mod_articles06 > .item .headline { margin: 8px 0 10px; padding: 20px 0 0; } .mod_articles06 > .item .areaTxt { padding: 20px 25px; } .mod_articles06 > .item .areaTxt .cat a { padding: 4px 17px; font-size: 1.3rem; font-weight: bold; } .mod_articles06 > .item .areaTxt .cat a:hover { text-decoration: none; } .mod_articles06 > .item .areaTxt .time { font-size: 1.4rem; } .mod_articles06 > .item .areaTxt .ico { border-radius: 50%; background: #fff; } .mod_articles06 > .item .areaTxt .highlights { font-size: 1.4rem; position: absolute; top: 0; left: 0; } .mod_articles06 > .item .areaTxt .highlights { font-size: 1.4rem; position: absolute; top: 0; left: 0; } .mod_articles06 > .item .areaTxt .tit { margin-bottom: 7px; } .mod_articles06 > .item .areaTxt .tit a { font-size: 1.6rem; } .mod_articles06 > .item .areaTxt .tags .item { margin-right: 0.5em; } .mod_articles06 > .item .areaFavorite { right: 25px; } .mod_articles06 > .item .areaFavorite i { font-size: 2.6rem; } } @keyframes fade-in { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } /* mixin for multiline */ /* table ================================================ */ .mod_table01 { margin-bottom: 40px; } .mod_table01 th, .mod_table01 td { padding-bottom: 15px; box-sizing: border-box; word-break: break-word; vertical-align: top; } .mod_table01 tr + tr th, .mod_table01 tr + tr td { padding-top: 30px; } .mod_table01 th { width: 29%; max-width: 150px; border-bottom: 2px solid #d04539; position: relative; padding-right: 15px; } .mod_table01 th:before { background: #fff; content: ""; width: 15px; height: 100%; position: absolute; bottom: -2px; right: 0; display: block; z-inedx: 1; } .mod_table01 td { width: 71%; max-width: 590px; border-bottom: 2px solid #eee; } .mod_table01 td a[target="_blank"] { text-decoration: none; } .mod_table01 td a[target="_blank"] span { text-decoration: underline; } .mod_table01 td a[target="_blank"] i { margin-left: 3px; } .mod_table01 td a[target="_blank"] i:before { position: relative; top: 4px; } .mod_table01 td a[href*=".pdf"] { position: relative; padding-right: 30px; text-decoration: none; } .mod_table01 td a[href*=".pdf"] span { text-decoration: none; } .mod_table01 td a[href*=".pdf"] i { position: absolute; right: 0; top: -3px; font-size: 2.7rem; } .mod_table01 td a[href*=".pdf"] i:before { position: relative; top: 0; } .mod_table01 td a span.is_clr01 { color: #d04539; text-decoration: underline; } .mod_table01 i { color: #d04539; } .mod_table01.is_aoi th { border-bottom-color: #34689a; } .mod_table01.is_aoi td em { color: #34689a; } .mod_table01.is_aoi i { color: #34689a; } .mod_table01.is_okuribi th { border-bottom-color: #8ec1fc; } .mod_table01.is_okuribi td em { color: #8ec1fc; } .mod_table01.is_okuribi i { color: #8ec1fc; } .mod_table01.is_gion th { border-bottom-color: #dc8394; } .mod_table01.is_gion td em { color: #dc8394; } .mod_table01.is_gion i { color: #dc8394; } .mod_table01.is_jidai th { border-bottom-color: #746bad; } .mod_table01.is_jidai td em { color: #746bad; } .mod_table01.is_jidai i { color: #746bad; } @media all and (min-width: 1120px) { .mod_table01 { margin-bottom: 50px; } .mod_table01 th { width: 23%; padding-right: 30px; } .mod_table01 th:before { width: 30px; } .mod_table01 td { width: 77%; } .mod_table01 td a[target="_blank"]:hover span { text-decoration: none; } .mod_table01 td a span:hover.is_clr01 { text-decoration: none; } } .mod_table02 { width: 100%; margin-bottom: 40px; } @media all and (min-width: 600px) { .mod_table02 { margin-bottom: 50px; } } .mod_table02 th { padding: 10px 0; width: auto; background: #d04539; color: #fff; border: 1px solid #ccc; position: static; text-align: center; vertical-align: middle; font-size: 1.2rem; box-sizing: border-box; max-width: none; } .mod_table02 th:before { display: none; } .mod_table02 td { padding: 15px 10px; width: auto; border: 1px solid #ccc; background: #fff; text-align: center; vertical-align: middle; font-size: 1.2rem; box-sizing: border-box; max-width: none; } @keyframes fade-in { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } /* mixin for multiline */ /* slider ================================================ */ .mod_slider01 .slider { margin-bottom: 20px; } .mod_slider01 .slider .item { position: relative; } .mod_slider01 .slider .item .caption { position: static; bottom: 0; left: 0; width: 100%; padding: 8px 20px 6px; box-sizing: border-box; background: rgba(0, 0, 0, 0.42); color: #fff; font-size: 1.0rem; line-height: 1.5; } .mod_slider01 .slider .item .img > img { width: 100%; height: 220px; object-fit: contain; font-family: "object-fit: contain;"; background: #f7f7f7; } @media all and (min-width: 1120px) { .mod_slider01 .slider .item .img > img { height: 640px; } } .mod_slider01 .sliderNav { position: relative; } .mod_slider01 .sliderNav:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; } .mod_slider01 .sliderNav.is_loaded:before { content: none; } .mod_slider01 .sliderNav .slick-list { overflow: hidden; width: 255px; margin: 0 auto; padding: 0; box-sizing: border-box; } .mod_slider01 .sliderNav .slick-slide { width: 47px; height: 47px; margin: 0 2.5px 6px; } .mod_slider01 .sliderNav .slick-slide > div { padding-bottom: 16px; overflow: hidden; } .mod_slider01 .sliderNav .item { position: relative; display: table-cell !important; width: 47px !important; height: 47px; vertical-align: middle; background: #eee; z-index: 1; } .mod_slider01 .sliderNav .item img { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: auto; height: 47px; } @media all and (-ms-high-contrast: none) { .mod_slider01 .sliderNav .item img { top: 0; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } } @media screen and (min-width: 1120px) { .mod_slider01 .sliderNav .slick-slide { width: 94px; height: 94px; } .mod_slider01 .sliderNav .item { width: 94px !important; height: 94px; } .mod_slider01 .sliderNav .item img { height: 94px; } } .mod_slider01 .sliderNav .slick-current .item:before { position: absolute; content: ""; bottom: -6px; left: 0; width: 100%; height: 3px; background: #d04539; z-index: 10; } .mod_slider01 .sliderNav .arrow { position: absolute; top: 7px; color: #555; font-size: 2.8rem; z-index: 1; } .mod_slider01 .sliderNav .arrow.prev { left: 0; } .mod_slider01 .sliderNav .arrow.next { right: 0; } @media all and (min-width: 1120px) { .mod_slider01 { width: 960px; margin: 0 auto; } .mod_slider01 .slider { margin-bottom: 50px; } .mod_slider01 .slider .item .caption { padding: 14px 20px; font-size: 1.5rem; text-align: center; } .mod_slider01 .sliderNav .slick-list { width: 772px; } .mod_slider01 .sliderNav .slick-slide { width: 94px; height: 94px; margin: 0 9.5px 16px; cursor: pointer; } .mod_slider01 .sliderNav .slick-current .item:before { bottom: -16px; height: 6px; } .mod_slider01 .sliderNav .arrow { cursor: pointer; top: 46px; width: 50px; height: 50px; font-size: 6rem; } .mod_slider01 .sliderNav .arrow.prev { left: 15px; } .mod_slider01 .sliderNav .arrow.next { right: 15px; } .mod_slider01 .sliderNav .arrow i { position: absolute; top: 0; } .mod_slider01 .sliderNav .arrow i:before { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } } .mod_slider02 .slider { margin: 0 -20px; } .mod_slider02 .slider .item { position: relative; width: 300px; padding: 20px 0; } .mod_slider02 .slider .item a { overflow: hidden; display: block; width: 300px; margin: 0 auto; box-shadow: 0 0 20px rgba(0, 0, 0, 0.16); background: #fff 50% 50% no-repeat; background-size: cover; text-decoration: none; } .mod_slider02 .slider .item .areaImg { overflow: hidden; position: relative; height: 200px; background: #ccc; box-sizing: border-box; } .mod_slider02 .slider .item .areaTxt { position: relative; min-height: 160px; padding: 15px 25px 5px; box-sizing: border-box; } .mod_slider02 .slider .item .areaTxt .tit { margin: 5px 0 8px; font-weight: bold; line-height: 1.46667; } .mod_slider02 .slider .item .areaTxt .txt { font-size: 1.3rem; line-height: 1.53846; } .mod_slider02 .slider .arrow { cursor: pointer; position: absolute; top: 50%; font-size: 100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: color .25s linear; transition: color .25s linear; left: 0; z-index: 30; background: rgba(255, 255, 255, 0.8); width: 30px; height: 30px; } @media all and (min-width: 600px) { .mod_slider02 .slider .arrow { left: -75px; background: none; width: 50px; height: 50px; } } .mod_slider02 .slider .arrow.next { left: auto; right: 0; } @media all and (min-width: 600px) { .mod_slider02 .slider .arrow.next { right: -75px; } } .mod_slider02 .slider .arrow > i { font-size: 30px; } @media all and (min-width: 600px) { .mod_slider02 .slider .arrow > i { font-size: 50px; } } .mod_slider02 .slider .arrow[aria-disabled='true'] { cursor: default; color: #EEEEEE; } .mod_slider02 .slider .slick-dots { bottom: -10px; } .mod_slider02 .slider .slick-dots li { width: 7px; height: 7px; } .mod_slider02 .slider .slick-dots li button { width: 7px; height: 7px; background: #CCCCCC; padding: 0; } .mod_slider02 .slider .slick-dots li button:before { display: none; } .mod_slider02 .slider .slick-dots li.slick-active { width: 15px; height: 15px; } .mod_slider02 .slider .slick-dots li.slick-active button { width: 15px; height: 15px; margin-top: 4px; background: #d04539; padding: 0; } .mod_slider02 .slider .slick-dots li.slick-active button:before { display: none; } @media all and (min-width: 600px) { .mod_slider02 .slider .item a { margin: 0 auto; } .mod_slider02 .slider .item.is_current a { position: relative; } .mod_slider02 .slider .item.is_current a:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.75); z-index: 5; } } @media all and (min-width: 1120px) { .mod_slider02 .slider { width: 990px; margin: 0 auto; padding: 0; box-sizing: border-box; } .mod_slider02 .slider .item { margin: 30px 0; padding: 0; box-sizing: border-box; } .mod_slider02 .slider .item a { margin: 0 auto; box-shadow: none; } .mod_slider02 .slider .slick-active .item a { box-shadow: 0 0 20px rgba(0, 0, 0, 0.16); } } @keyframes fade-in { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } /* mixin for multiline */ /* other ================================================ */ .mod_sponsorship01 { background: #eee; } .mod_sponsorship01 .sponsorshipIn { padding: 58px 50px 60px; } .mod_sponsorship01 .leadTit { position: relative; margin-bottom: 28px; text-align: center; } .mod_sponsorship01 .leadTit:before { position: absolute; content: ""; top: 50%; left: 0; width: 100%; height: 1px; background: #ccc; } .mod_sponsorship01 .leadTit span { position: relative; padding: 0 20px; background: #eee; font-size: 1.8rem; font-weight: bold; } .mod_sponsorship01 .copy { margin-bottom: 24px; text-align: center; } .mod_sponsorship01 .list { overflow: hidden; } .mod_sponsorship01 .list01 .item { margin: 0 0 15px; } .mod_sponsorship01 .list02 .item { float: left; width: 49%; margin: 0 0 2%; } .mod_sponsorship01 .list02 .item:nth-child(even) { float: right; } .mod_sponsorship01 .list03 { overflow: visible; } .mod_sponsorship01 .list03 .slick-slide { margin: 0 3px; } .mod_sponsorship01 .list03 .arrow { cursor: pointer; position: absolute; top: 50%; font-size: 100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: color .25s linear; transition: color .25s linear; left: 0; z-index: 30; background: rgba(255, 255, 255, 0.8); width: 30px; height: 30px; } @media all and (min-width: 600px) { .mod_sponsorship01 .list03 .arrow { left: -75px; background: none; width: 50px; height: 50px; } } .mod_sponsorship01 .list03 .arrow.next { left: auto; right: 0; } @media all and (min-width: 600px) { .mod_sponsorship01 .list03 .arrow.next { right: -75px; } } .mod_sponsorship01 .list03 .arrow > i { font-size: 30px; } @media all and (min-width: 600px) { .mod_sponsorship01 .list03 .arrow > i { font-size: 50px; } } .mod_sponsorship01 .list03 .arrow[aria-disabled='true'] { cursor: default; color: #EEEEEE; } .mod_sponsorship01 .list03 .slick-dots li { width: 7px; height: 7px; } .mod_sponsorship01 .list03 .slick-dots li button { width: 7px; height: 7px; background: #CCCCCC; padding: 0; } .mod_sponsorship01 .list03 .slick-dots li button:before { display: none; } .mod_sponsorship01 .list03 .slick-dots li.slick-active { width: 15px; height: 15px; } .mod_sponsorship01 .list03 .slick-dots li.slick-active button { width: 15px; height: 15px; margin-top: 4px; background: #d04539; padding: 0; } .mod_sponsorship01 .list03 .slick-dots li.slick-active button:before { display: none; } .mod_sponsorship01 .list03 .item { float: left; width: 49%; } .mod_sponsorship01 .list03 .item:nth-child(even) { float: right; } .mod_sponsorship01 .areaInfo { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column wrap; flex-flow: column wrap; margin-top: 50px; padding: 25px 20px; border: 1px solid #ccc; } .mod_sponsorship01 .areaInfo > .tit { margin-bottom: 10px; color: #d04539; font-weight: bold; text-align: center; } .mod_sponsorship01 .areaInfo > .txt { margin-bottom: 10px; font-size: 1.3rem; line-height: 1.53846; text-align: center; } .mod_sponsorship01 .areaInfo .link a { overflow: hidden; display: block; text-decoration: none; } .mod_sponsorship01 .areaInfo .link a > .txt { text-decoration: underline; } .mod_sponsorship01 .areaInfo .link a .ico { float: left; display: block; text-align: center; } .mod_sponsorship01 .areaInfo .link a .ico i { color: #d04539; font-size: 3.5rem; } .mod_sponsorship01 .areaInfo .link a .ico .txt { display: block; font-size: 1.1rem; } .mod_sponsorship01 .areaInfo .link a > .txt { display: block; padding-left: 50px; font-size: 1.3rem; line-height: 1.53846; } @media all and (min-width: 600px) { .mod_sponsorship01 .list02 { margin-bottom: -webkit-calc(30px - 2%); margin-bottom: calc(30px - 2%); } .mod_sponsorship01 .list02 .item { width: 32%; margin: 0 2% 2% 0; } .mod_sponsorship01 .list02 .item:nth-child(even) { float: left; } .mod_sponsorship01 .list02 .item:nth-child(3n) { margin-right: 0; } .mod_sponsorship01 .list03 { width: 837px; margin: auto; } .mod_sponsorship01 .list03.viewPc { display: block; } .mod_sponsorship01 .list03 .item { width: 32%; margin: 0 2% 2% 0; } .mod_sponsorship01 .list03 .item:nth-child(even) { float: left; } .mod_sponsorship01 .list03 .item:nth-child(3n) { margin-right: 0; } .mod_sponsorship01 .areaInfo { margin-top: 60px; text-align: center; } .mod_sponsorship01 .areaInfo .link a { display: inline-block; } .mod_sponsorship01 .areaInfo .link a > .txt { text-align: left; } } @media all and (min-width: 1120px) { .mod_sponsorship01 .sponsorshipIn { width: 960px; margin: 0 auto; padding: 64px 0 70px; } .mod_sponsorship01 .leadTit { width: 275px; margin: 0 auto 43px; } .mod_sponsorship01 .copy { font-size: 1.8rem; } .mod_sponsorship01 .list01 { margin-bottom: 30px; } .mod_sponsorship01 .list01 .item { float: left; width: 28.6%; margin: 0 7.1% 15px 0; } .mod_sponsorship01 .list01 .item:nth-child(3n) { margin-right: 0; } .mod_sponsorship01 .list02 .item { width: 16.04%; margin: 0 .752% 2% 0; } .mod_sponsorship01 .list02 .item:nth-child(3n) { margin: 0 .752% 2% 0; } .mod_sponsorship01 .list02 .item:nth-child(6n) { margin-right: 0; } .mod_sponsorship01 .list03 .slick-list { margin: 0 -3px; } .mod_sponsorship01 .areaInfo { padding: 45px 0 48px; } .mod_sponsorship01 .areaInfo .tit { font-size: 1.8rem; } .mod_sponsorship01 .areaInfo > .txt { margin-bottom: 20px; } .mod_sponsorship01 .areaInfo .link a > .txt { padding-top: 17px; } .mod_sponsorship01 .areaInfo .link a:hover > .txt { text-decoration: none; } } .mod_bnrs01 { margin: 50px 0 0; } .mod_bnrs01 .item a, .mod_bnrs01 .item img { display: block; } .mod_bnrs01 .item a { position: relative; box-shadow: 0 0 20px rgba(0, 0, 0, 0.16); background: #fff; text-decoration: none; } .mod_bnrs01 .item + .item { margin-top: 15px; } .mod_bnrs01 .item.is_current a:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.75); z-index: 5; } @media all and (min-width: 1120px) { .mod_bnrs01 { width: 960px; margin: 100px auto 0; } .mod_bnrs01 .item { float: left; width: 470px; } .mod_bnrs01 .item:nth-child(even) { float: right; } .mod_bnrs01 .item + .item { margin: 0; } } .mod_campaignplan01 { padding: 67px 0 70px; background: #f7f7f7; } @media all and (min-width: 1120px) { .mod_campaignplan01 { padding: 147px 0 150px; } .mod_campaignplan01 .leadTit { margin-bottom: 20px; } } .mod_alert01 { padding: 7px 4px; margin-bottom: 15px; background: #d04539; text-align: center; color: #fff; font-size: 1.5rem; } @media all and (min-width: 1120px) { .mod_alert01 { padding: 26px 13px; margin-bottom: 100px; font-size: 1.8rem; } } .mod_categories_slider01 { padding-bottom: 50px; } @media all and (min-width: 1120px) { .mod_categories_slider01 { padding-bottom: 100px; } } .mod_labels01 { overflow: hidden; margin: 3px 0 0; } .mod_labels01 .item { float: left; margin: 0 3px 5px 0; } .mod_labels01 .item a { position: relative; display: block; padding: 3px 10px; border: 1px solid #ccc; border-radius: 3px; color: #555; font-size: 1rem; font-weight: normal; text-decoration: none; line-height: 1.2; } .mod_labels01 .item a:hover { text-decoration: none; } .mod_labels01 .item a:before { position: absolute; content: ''; top: 50%; left: 10px; height: 10px; margin-top: -5px; background-repeat: no-repeat; background-size: 100%; } .mod_labels01 .item01 a { padding-left: 37px; } .mod_labels01 .item01 a:before { width: 23px; background-image: url(../img/modules/ico_labels01.png); } .mod_labels01 .item02 a { padding-left: 24px; } .mod_labels01 .item02 a:before { width: 10px; background-image: url(../img/modules/ico_labels02.png); } .mod_labels01 .item03 a { padding-left: 22px; } .mod_labels01 .item03 a:before { width: 8px; background-image: url(../img/modules/ico_labels03.png); } .mod_labels01 .item04 a { padding-left: 27px; } .mod_labels01 .item04 a:before { width: 12px; background-image: url(../img/modules/ico_labels04.png); } @media screen and (max-width: 767px) { .mod_labels01 .item04 a { padding-left: 23px; } .mod_labels01 .item04 a:before { left: 7px; } } .mod_labels01.is_center { text-align: center; } .mod_labels01.is_center .item { float: none; display: inline-block; margin: 0 0 5px; } .mod_labels01.is_single .item a { padding-top: 4px; padding-bottom: 3px; font-size: 1.3rem; } @media all and (min-width: 600px) { .mod_labels01 { margin: 3px 0; } .mod_labels01.is_single .item a { padding-top: 5px; padding-bottom: 4px; font-size: 1.4rem; } } @keyframes fade-in { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } /* mixin for multiline */ /* iconfont ================================================ */ /* #styleguide アイコンフォント 大きさはiに対してfont-size指定。 例：　i { font-size: 2rem; } 色はi::beforeに対してcolor指定。 例：　i { color: $clr_main; }``` ▼矢印アイコン




▼Gナビ




▼検索系




▼お気に入り




▼カテゴリ別 観光情報




▼お役立ち情報




▼イベント情報




▼〇〇だより




▼その他

``` */ [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @font-face { font-family: "kyotokanko"; src: url("iconfont/kyotokanko.eot"); src: url("iconfont/kyotokanko.eot?#iefix") format("eot"), url("iconfont/kyotokanko.woff2") format("woff2"), url("iconfont/kyotokanko.woff") format("woff"), url("iconfont/kyotokanko.ttf") format("truetype"), url("iconfont/kyotokanko.svg#kyotokanko") format("svg"); } .icon-access-bus:before, .icon-arrow-circle-right:before, .icon-arrow-down:before, .icon-arrow-left:before, .icon-arrow-right:before, .icon-arrow-square-bottom:before, .icon-arrow-square-left:before, .icon-arrow-square-right:before, .icon-arrow-square-up:before, .icon-arrow-up:before, .icon-attention:before, .icon-book-convenience:before, .icon-category-activity:before, .icon-category-calender:before, .icon-category-experience:before, .icon-category-gourmet:before, .icon-category-hotel:before, .icon-category-hotspring:before, .icon-category-interest:before, .icon-category-monument:before, .icon-category-museum:before, .icon-category-nature:before, .icon-category-other:before, .icon-category-rental:before, .icon-category-shrine:before, .icon-category-traditional:before, .icon-clear:before, .icon-contact-mail:before, .icon-display:before, .icon-document:before, .icon-download:before, .icon-event-art:before, .icon-event-balloon:before, .icon-event-calender:before, .icon-event-flag:before, .icon-event-lantern:before, .icon-event-nohmask:before, .icon-event-sketches:before, .icon-faq-information:before, .icon-favorite-circle:before, .icon-favorite-off:before, .icon-favorite-on:before, .icon-festival:before, .icon-flowers01:before, .icon-flowers02:before, .icon-flowers03:before, .icon-glory:before, .icon-ico:before, .icon-information-office:before, .icon-language:before, .icon-link-blank:before, .icon-magagine-book:before, .icon-map-rute:before, .icon-marker:before, .icon-menu-category:before, .icon-menu-event:before, .icon-menu-glossary:before, .icon-menu-home:before, .icon-menu-tips:before, .icon-menu-variation:before, .icon-momiji:before, .icon-night:before, .icon-open-spot:before, .icon-other-list:before, .icon-other-minus:before, .icon-other-pdf-file:before, .icon-other-pdf:before, .icon-other-plus:before, .icon-other-window:before, .icon-phone:before, .icon-recommend-star:before, .icon-sakura:before, .icon-search-area:before, .icon-search-calender:before, .icon-search-glass:before, .icon-search-keyword:before, .icon-search-mic:before, .icon-search-tag:before, .icon-tsutsuji01:before, .icon-tsutsuji02:before, .icon-tsutsuji03:before, .icon-ume01:before, .icon-ume02:before, .icon-ume03:before, .icon-wifi-wave:before, .icon-myplan:before, .icon-check-mark:before, .icon-bag:before, .icon-congestion_check:before, .icon-taxi:before, .icon-passport:before, .icon-area_info:before, .icon-clock:before, .icon-crowd-1:before, .icon-crowd-2:before, .icon-crowd-3:before, .icon-crowd-4:before, .icon-crowd-5:before, .icon-help:before, .icon-lightbulb:before, .icon-lightbulb-alt:before { font-family: "kyotokanko"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; line-height: 1; } .icon-access-bus:before { content: ""; } .icon-arrow-circle-right:before { content: ""; } .icon-arrow-down:before { content: ""; } .icon-arrow-left:before { content: ""; } .icon-arrow-right:before { content: ""; } .icon-arrow-square-bottom:before { content: ""; } .icon-arrow-square-left:before { content: ""; } .icon-arrow-square-right:before { content: ""; } .icon-arrow-square-up:before { content: ""; } .icon-arrow-up:before { content: ""; } .icon-attention:before { content: ""; } .icon-book-convenience:before { content: ""; } .icon-category-activity:before { content: ""; } .icon-category-calender:before { content: ""; } .icon-category-experience:before { content: ""; } .icon-category-gourmet:before { content: ""; } .icon-category-hotel:before { content: ""; } .icon-category-hotspring:before { content: ""; } .icon-category-interest:before { content: ""; } .icon-category-monument:before { content: ""; } .icon-category-museum:before { content: ""; } .icon-category-nature:before { content: ""; } .icon-category-other:before { content: ""; } .icon-category-rental:before { content: ""; } .icon-category-shrine:before { content: ""; } .icon-category-traditional:before { content: ""; } .icon-clear:before { content: ""; } .icon-contact-mail:before { content: ""; } .icon-display:before { content: ""; } .icon-document:before { content: ""; } .icon-download:before { content: ""; } .icon-event-art:before { content: ""; } .icon-event-balloon:before { content: ""; } .icon-event-calender:before { content: ""; } .icon-event-flag:before { content: ""; } .icon-event-lantern:before { content: ""; } .icon-event-nohmask:before { content: ""; } .icon-event-sketches:before { content: ""; } .icon-faq-information:before { content: ""; } .icon-favorite-circle:before { content: ""; } .icon-favorite-off:before { content: ""; } .icon-favorite-on:before { content: ""; } .icon-festival:before { content: ""; } .icon-flowers01:before { content: ""; } .icon-flowers02:before { content: ""; } .icon-flowers03:before { content: ""; } .icon-glory:before { content: ""; } .icon-ico:before { content: ""; } .icon-information-office:before { content: ""; } .icon-language:before { content: ""; } .icon-link-blank:before { content: ""; } .icon-magagine-book:before { content: ""; } .icon-map-rute:before { content: ""; } .icon-marker:before { content: ""; } .icon-menu-category:before { content: ""; } .icon-menu-event:before { content: ""; } .icon-menu-glossary:before { content: ""; } .icon-menu-home:before { content: ""; } .icon-menu-tips:before { content: ""; } .icon-menu-variation:before { content: ""; } .icon-momiji:before { content: ""; } .icon-night:before { content: ""; } .icon-open-spot:before { content: ""; } .icon-other-list:before { content: ""; } .icon-other-minus:before { content: ""; } .icon-other-pdf-file:before { content: ""; } .icon-other-pdf:before { content: ""; } .icon-other-plus:before { content: ""; } .icon-other-window:before { content: ""; } .icon-phone:before { content: ""; } .icon-recommend-star:before { content: ""; } .icon-sakura:before { content: ""; } .icon-search-area:before { content: ""; } .icon-search-calender:before { content: ""; } .icon-search-glass:before { content: ""; } .icon-search-keyword:before { content: ""; } .icon-search-mic:before { content: ""; } .icon-search-tag:before { content: ""; } .icon-tsutsuji01:before { content: ""; } .icon-tsutsuji02:before { content: ""; } .icon-tsutsuji03:before { content: ""; } .icon-ume01:before { content: ""; } .icon-ume02:before { content: ""; } .icon-ume03:before { content: ""; } .icon-wifi-wave:before { content: ""; } .icon-myplan:before { content: ""; } .icon-check-mark:before { content: ""; } .icon-bag:before { content: ""; } .icon-congestion_check:before { content: ""; } .icon-taxi:before { content: ""; } .icon-passport:before { content: ""; } .icon-area_info:before { content: ""; } .icon-clock:before { content: ""; } .icon-crowd-1:before { content: ""; } .icon-crowd-2:before { content: ""; } .icon-crowd-3:before { content: ""; } .icon-crowd-4:before { content: ""; } .icon-crowd-5:before { content: ""; } .icon-help:before { content: ""; } .icon-lightbulb:before { content: ""; } .icon-lightbulb-alt:before { content: ""; } .fn-container { overflow: auto; } @keyframes fade-in { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } /* mixin for multiline */ /* wrap ================================================ */ .mod_relateWrap01 { padding-top: 96px; padding-bottom: 48px; background: #f7f7f7; } .mod_relateWrap01 .mod_tit03 { margin-bottom: 20px; } .mod_relateWrap01 .mod_btn01 { margin-top: 30px; } @media all and (min-width: 1120px) { .mod_relateWrap01 { padding-top: 147px; padding-bottom: 73px; } .mod_relateWrap01 .mod_tit03 { margin-bottom: 50px; } .mod_relateWrap01 .mod_articles02 > .item + .item { margin-top: 0; } .mod_relateWrap01 .mod_btn01 { margin-top: 50px; } } .mod_recommendWrap01 { padding-top: 73px; padding-bottom: 70px; background: #f7f7f7; } .mod_recommendWrap01 .mod_tit03 { margin-bottom: 20px; } .mod_recommendWrap01 .mod_btn03 { margin-top: 30px; } @media all and (min-width: 1120px) { .mod_recommendWrap01 { padding-top: 73px; padding-bottom: 73px; } .mod_recommendWrap01 .mod_tit03 { margin-bottom: px; } } .mod_faqWrap01 { padding-top: 48px; padding-bottom: 96px; background: #f7f7f7; } .mod_faqWrap01 .mod_tit03 { margin-bottom: 23px; } .mod_faqWrap01 .mod_btn03 { margin-top: 40px; } @media all and (min-width: 1120px) { .mod_faqWrap01 { padding-top: 73px; padding-bottom: 145px; } .mod_faqWrap01 .mod_tit03 { margin-bottom: 65px; } .mod_faqWrap01 .mod_btn03 { margin-top: 30px; } } @keyframes fade-in { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } /* mixin for multiline */ /* modal ================================================ */ /* #styleguide ``` ``` */ [class*="js-modal-open"] { cursor: pointer; } .mod_modalContent { display: none; position: fixed; top: 0; bottom: 0; right: 0; left: 0; margin: auto; width: -webkit-calc(100% - 70px); width: calc(100% - 70px); height: 80%; z-index: 2002; } .mod_modalContent.is_active { display: block; } .mod_modalContent .modalClose { position: absolute; right: -35px; top: 0; width: 35px; height: 35px; background: #333; cursor: pointer; } .mod_modalContent .modalClose .icon { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); color: #fff; font-size: 1.5rem; } .mod_modalContent iframe { width: 100%; height: 100%; } .mod_modalContent .contentInner { background: #fff; height: 100%; width: 100%; padding: 20px 30px; overflow: auto; box-sizing: border-box; -webkit-overflow-scrolling: touch; } @media all and (min-width: 1120px) { .mod_modalContent { width: 960px; height: 560px; } .mod_modalContent .modalClose { right: -50px; width: 50px; height: 50px; } .mod_modalContent .contentInner { padding: 65px 90px; } } .mod_changeInfo .currentDate { text-align: right; font-size: 1.3rem; } .mod_changeInfo .headInfo { padding-top: 20px; } .mod_changeInfo .detailInfo { padding-top: 40px; } .mod_changeInfo .detailInfo .note { padding-top: 15px; color: #d04539; } @media all and (min-width: 1120px) { .mod_changeInfo .headInfo { padding-top: 50px; } .mod_changeInfo .headInfo .definition dd { font-size: 1.8rem; } .mod_changeInfo .detailInfo { padding-top: 80px; } .mod_changeInfo .detailInfo .note { padding-top: 30px; } }