@charset "UTF-8"; /* ========================================================================== Foundation ========================================================================== */ /* moblie */ /* child */ /* header-main-nav-bt */ /* hover */ /* item */ /* hover */ /* current */ /* disable */ /* arrow */ html { font-size: 62.5%; } body { color: #333333; background-color: inherit; font-family: YakuHanJP, "Open sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; text-align: center; font-size: 1.6rem; letter-spacing: 0.05rem; } main { line-height: 1.7; } a { color: #b3242b; } a:hover { color: #d64d54; } .for_pc { display: none !important; } @media screen and (min-width: 960px) { .for_pc { display: block !important; } } .for_tb { display: none !important; } @media screen and (min-width: 600px) { .for_tb { display: block !important; } } .for_mb { display: block !important; } @media screen and (min-width: 600px) { .for_mb { display: none !important; } } .hidden-sp { display: none !important; } @media screen and (min-width: 600px) { .hidden-sp { display: block !important; } } @media screen and (min-width: 960px) { .hidden-sp { display: block !important; } } .align-right { text-align: right; } .align-left { text-align: left; } .adminHeader { text-align: start; } @font-face { font-family: 'my-fonts'; src: url("https://cdn.clst01.innova-jp.net/progress/fonts/my-fonts.eot"); src: url("https://cdn.clst01.innova-jp.net/progress/fonts/my-fonts.eot#iefix") format("embedded-opentype"), url("https://cdn.clst01.innova-jp.net/progress/fonts/my-fonts.ttf") format("truetype"), url("https://cdn.clst01.innova-jp.net/progress/fonts/my-fonts.woff") format("woff"), url("https://cdn.clst01.innova-jp.net/progress/fonts/my-fonts.svg#my-fonts") format("svg"); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'my-fonts' !important; 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; } .icon-contact:before { content: "\e900"; } .icon-document:before { content: "\e901"; } .icon-next:before { content: "\e902"; } .icon-prev:before { content: "\e903"; } .icon-search:before { content: "\e904"; } /* ========================================================================== Layout ========================================================================== */ .header { background-color: white; color: #505050; z-index: 5; top: 0; transition: box-shadow 0.3s ease; position: sticky; width: 100%; } .header-container { width: 100%; margin: auto; padding: 10px; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; position: relative; height: 60px; box-sizing: border-box; } @media screen and (min-width: 600px) { .header-container { padding: 10px 15px; height: 80px; } } @media screen and (min-width: 960px) { .header-container { height: 118px; max-width: 1060px; padding: 5px 0 0; flex-wrap: wrap; } } .footer { background-color: #b3242b; color: white; } .footer-container { width: 100%; margin: auto; padding: 30px 20px; font-size: 1.5rem; } @media screen and (min-width: 960px) { .footer-container { max-width: 1060px; display: flex; justify-content: flex-start; padding: 45px 0; font-size: 1.4rem; } } .main { padding-top: 0px; } @media screen and (min-width: 600px) { .main { padding-top: 0px; } } @media screen and (min-width: 960px) { .main { padding-top: 0px; } } @media screen and (min-width: 960px) { .col2 .main { display: flex; flex-wrap: wrap; margin-bottom: 60px; justify-content: center; } } .col2 .main .main-visual-wrapper { width: 100%; } .col2 .main .breadcrumb-block { width: 100%; } .col2 .main .content-block { margin: 0; padding: 16px 10px; margin-bottom: 60px; width: 100%; min-height: 25vh; } @media screen and (min-width: 960px) { .col2 .main .content-block { max-width: 740px; margin: 0; padding: 45px 0 0 0; } } .col2 .main .aside { width: 100%; margin: 0; padding: 0 20px 60px; } @media screen and (min-width: 960px) { .col2 .main .aside { max-width: 280px; margin: 0 0 0 40px; padding: 45px 0 0 0; } } /* ========================================================================== Object ========================================================================== */ /* Component ----------------------------------------------------------------- */ .header-logo { width: 60%; margin: 0; text-align: left; padding: 0; } @media screen and (min-width: 600px) { .header-logo { width: 30%; } } @media screen and (min-width: 960px) { .header-logo { width: 100%; } } .header-logo__item-link { color: #505050; text-decoration: none; font-size: 2.6rem; display: block; line-height: 0; margin-right: 10px; } @media screen and (min-width: 960px) { .header-logo__item-link { font-size: 2.0rem; line-height: 42px; } } .header-logo__item-link:hover { color: #505050; } .header-logo__item-img { height: auto; max-height: 60px; } @media screen and (min-width: 960px) { .header-logo__item-img { height: 60px; } } .header-sub-nav { display: none; } @media screen and (min-width: 960px) { .header-sub-nav { margin: 0; display: flex; justify-content: flex-end; position: absolute; right: 0; top: 10px; } .header-sub-nav__item { margin-left: 20px; list-style: none; } .header-sub-nav__item-link { font-size: 1.2rem; color: #505050; text-decoration: none; } .header-sub-nav__item-link:hover { color: #b3242b; } } .ccm-search-block { position: relative; outline: none; } .ccm-search-block .ccm-search-block-form h3 { display: none; } .ccm-search-block .ccm-search-block-form:before { content: "\e904"; font-family: "my-fonts" !important; speak: none; color: #d1d1d1; position: absolute; font-size: 26px; right: 17px; top: 17px; } @media screen and (min-width: 960px) { .ccm-search-block .ccm-search-block-form:before { font-size: 14px; right: 7px; top: 7px; } } .ccm-search-block-text { height: 40px; width: 100%; border: 1px #ccc solid; padding: 0 20px 0 5px; background-color: #fff; } @media screen and (min-width: 960px) { .ccm-search-block-text { height: 25px; width: 150px; font-size: 12px; } } .ccm-search-block-submit { border: none; position: absolute; padding: 0; color: rgba(255, 255, 255, 0); width: 50px; height: 50px; right: 0px; top: 0px; } @media screen and (min-width: 960px) { .ccm-search-block-submit { width: 15px; height: auto; right: 7px; top: 2px; } } .header-nav-list .ccm-search-block { padding: 10px 10px 2px; border-top: 1px solid #d1d1d1; } .header.mini { box-shadow: 0 0 2px 2px rgba(80, 80, 80, 0.2); } .header-nav { display: flex; flex-direction: row-reverse; } @media screen and (min-width: 960px) { .header-nav { flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: flex-end; background-color: white; height: auto; width: 100%; } } .header-nav.active { height: auto; } .header-nav-list { opacity: 0; position: fixed; top: 30px; left: 0; visibility: hidden; transition: .5s; padding: 0; width: 100%; margin: 0; text-align: left; background-color: white; border-bottom: 1px solid #d1d1d1; } @media screen and (min-width: 960px) { .header-nav-list { font-size: 1.4rem; opacity: 1; top: 100%; visibility: visible; display: flex; justify-content: space-between; border-bottom: none; position: static; width: 57%; height: auto; } } .active .header-nav-list { opacity: 1; top: 60px; visibility: visible; transition: .5s; z-index: 5; height: 100%; -webkit-overflow-scrolling: touch; padding-bottom: 50px; margin-bottom: 50px; overflow-y: scroll; } @media screen and (min-width: 600px) { .active .header-nav-list { top: 80px; } } .header-nav-list__item, .header-nav-list .header-sub-nav__item { list-style: none; background-color: inherit; position: relative; } .header-nav-list__item:hover, .header-nav-list .header-sub-nav__item:hover { background-color: inherit; } .header-nav-list__item:nth-last-child(1), .header-nav-list .header-sub-nav__item:nth-last-child(1) { margin-bottom: 30px; } @media screen and (min-width: 960px) { .header-nav-list__item:nth-last-child(1), .header-nav-list .header-sub-nav__item:nth-last-child(1) { margin-bottom: 0; } } .header-nav-list__item-link, .header-nav-list .header-sub-nav__item-link { color: #333333; border-top: 1px solid #d1d1d1; text-decoration: none; padding: 15px 10px 14px; display: block; transition: .5s; font-weight: 700; letter-spacing: 0.05em; white-space: nowrap; } @media screen and (min-width: 960px) { .header-nav-list__item-link, .header-nav-list .header-sub-nav__item-link { font-size: 1.4rem; border-top: none; border-bottom: 3px solid rgba(179, 36, 43, 0); } } .header-nav-list__item-link:hover, .header-nav-list .header-sub-nav__item-link:hover { color: inherit; } @media screen and (min-width: 960px) { .header-nav-list__item-link:hover, .header-nav-list .header-sub-nav__item-link:hover { border-bottom: 3px solid #b3242b; } } .ccm-search-block + .header-nav-list__item .header-nav-list__item-link, .header-nav-list .ccm-search-block + .header-sub-nav__item .header-nav-list__item-link, .ccm-search-block + .header-nav-list__item .header-nav-list .header-sub-nav__item-link, .header-nav-list .ccm-search-block + .header-nav-list__item .header-sub-nav__item-link, .header-nav-list .ccm-search-block + .header-sub-nav__item .header-sub-nav__item-link { border-top: none; } @media screen and (min-width: 960px) { .current .header-nav-list__item, .current .header-nav-list .header-sub-nav__item, .header-nav-list .current .header-sub-nav__item { background-color: inherit; } } @media screen and (min-width: 960px) { .current .header-nav-list__item-link, .current .header-nav-list .header-sub-nav__item-link, .header-nav-list .current .header-sub-nav__item-link { color: inherit; border-bottom: 3px solid #b3242b; } } .header-nav-list-child { padding: 0; margin: 0 0 5px 25px; display: none; } @media screen and (min-width: 960px) { .header-nav-list-child { position: absolute; z-index: 9999; top: 100%; left: 0; margin: 0; display: block; } } @media screen and (min-width: 960px) { .header-nav-list-child__item { overflow: hidden; height: 0; opacity: 0; transition: .3s; white-space: nowrap; padding: 0; text-align: left; min-width: 110px; } } .header-nav-list-child__item-link { padding: 10px 0; border-top: 1px solid rgba(209, 209, 209, 0.6); color: #333333; display: block; text-decoration: none; font-weight: 700; letter-spacing: 0.05em; } @media screen and (min-width: 960px) { .header-nav-list-child__item-link { color: white; font-weight: 400; } } .header-nav-list-child__item-link:hover { color: white; } @media screen and (min-width: 960px) { .header-nav-list-child__item-link { font-size: 1.4rem; border-top: none; display: block; height: 100%; padding: 0 3em 0 3em; } } @media screen and (min-width: 960px) { .header-nav-list__item:hover .header-nav-list-child__item, .header-nav-list .header-sub-nav__item:hover .header-nav-list-child__item { overflow: visible; height: 45px; line-height: 45px; opacity: 1; background-color: #b3242b; } } .header-nav-list__item:hover .header-nav-list-child__item:hover, .header-nav-list .header-sub-nav__item:hover .header-nav-list-child__item:hover { background-color: #b3242b; } .header-nav-list__item:hover .header-nav-list-child__item-link:hover, .header-nav-list .header-sub-nav__item:hover .header-nav-list-child__item-link:hover { background-color: #d64d54; } .header-CTA { padding: 0; display: flex; justify-content: space-between; margin: 0; } @media screen and (min-width: 960px) { .header-CTA { padding: 0 0 11px 0; position: relative; top: auto; right: auto; } } .header-CTA__item { list-style: none; margin-left: 10px; } @media screen and (min-width: 600px) { .header-CTA__item { margin-left: 15px; } } @media screen and (min-width: 960px) { .header-CTA__item { margin-left: 12px; } } .header-CTA__item:nth-of-type(1) { margin-left: 0; } .header-CTA__item-bt--document { color: white; background-color: #b3242b; border: 1px solid inherit; text-decoration: none; padding: 18px 0; white-space: nowrap; display: block; line-height: 1; letter-spacing: 0.1rem; margin: auto; transition: all 0.3s ease; padding: 0; height: 36px; width: 36px; font-size: 0; line-height: inherit; font-weight: 400; letter-spacing: 0.1em; } .header-CTA__item-bt--document:hover { color: white; background-color: #d64d54; border: 1px solid inherit; } @media screen and (min-width: 600px) { .header-CTA__item-bt--document { padding: 8px 30px; height: auto; width: auto; text-indent: 0; font-size: 1.4rem; } } @media screen and (min-width: 960px) { .header-CTA__item-bt--document { font-weight: normal; padding: 8px 32px; } } .header-CTA__item-bt--document:before { font-family: "my-fonts" !important; speak: none; line-height: 36px; } @media screen and (min-width: 600px) { .header-CTA__item-bt--document:before { display: none; } } .header-CTA__item-bt--document:before { content: "\e901"; font-size: 24px; } .header-CTA__item-bt--contact { color: white; background-color: #b3242b; border: 1px solid inherit; text-decoration: none; padding: 18px 0; white-space: nowrap; display: block; line-height: 1; letter-spacing: 0.1rem; margin: auto; transition: all 0.3s ease; padding: 0; height: 36px; width: 36px; font-size: 0; line-height: inherit; font-weight: 400; letter-spacing: 0.1em; } .header-CTA__item-bt--contact:hover { color: white; background-color: #d64d54; border: 1px solid inherit; } @media screen and (min-width: 600px) { .header-CTA__item-bt--contact { padding: 8px 30px; height: auto; width: auto; text-indent: 0; font-size: 1.4rem; } } @media screen and (min-width: 960px) { .header-CTA__item-bt--contact { font-weight: normal; padding: 8px 32px; } } .header-CTA__item-bt--contact:before { font-family: "my-fonts" !important; speak: none; line-height: 36px; } @media screen and (min-width: 600px) { .header-CTA__item-bt--contact:before { display: none; } } .header-CTA__item-bt--contact:before { content: "\e900"; font-size: 18px; } .footer-logo { width: 100%; margin: 0; text-align: center; font-size: 1.4em; } @media screen and (min-width: 960px) { .footer-logo { text-align: left; } } .footer-logo__link { color: white; text-decoration: none; font-weight: 700; } .footer-logo__link:hover { color: white; } .footer-logo__link-img { height: 60px; } .footer-CTA { padding: 0; } @media screen and (min-width: 600px) { .footer-CTA { display: flex; justify-content: center; } } @media screen and (min-width: 960px) { .footer-CTA { display: flex; justify-content: flex-start; } } .footer-CTA__item { list-style: none; margin-bottom: 20px; } @media screen and (min-width: 600px) { .footer-CTA__item { margin-right: 40px; } } .footer-CTA__item:nth-last-of-type(1) { margin-right: 0; } @media screen and (min-width: 960px) { .footer-CTA__item { margin-right: 20px; } } .footer-CTA__item-bt { color: white; background-color: #b3242b; border: 1px solid inherit; text-decoration: none; padding: 18px 0; white-space: nowrap; display: block; line-height: 1; letter-spacing: 0.1rem; margin: auto; transition: all 0.3s ease; padding: 13px 25px; width: 100%; font-weight: 700; color: white; background-color: rgba(255, 255, 255, 0); border: 1px solid white; } .footer-CTA__item-bt:hover { color: white; background-color: #d64d54; border: 1px solid inherit; } @media screen and (min-width: 600px) { .footer-CTA__item-bt { padding: 15px 35px; } } @media screen and (min-width: 960px) { .footer-CTA__item-bt { font-weight: normal; } } .footer-CTA__item-bt:hover { color: #333333; background-color: white; border: 1px solid white; } .footer-CTA__item-bt--bt02 { color: white; background-color: #b3242b; border: 1px solid inherit; text-decoration: none; padding: 18px 0; white-space: nowrap; display: block; line-height: 1; letter-spacing: 0.1rem; margin: auto; transition: all 0.3s ease; padding: 13px 25px; width: 100%; font-weight: 700; color: white; background-color: rgba(255, 255, 255, 0); border: 1px solid white; } .footer-CTA__item-bt--bt02:hover { color: white; background-color: #d64d54; border: 1px solid inherit; } @media screen and (min-width: 600px) { .footer-CTA__item-bt--bt02 { padding: 15px 35px; } } @media screen and (min-width: 960px) { .footer-CTA__item-bt--bt02 { font-weight: normal; } } .footer-CTA__item-bt--bt02:hover { color: #333333; background-color: white; border: 1px solid white; } .footer-SNS { padding: 0; margin: 20px 0 0 0; display: flex; justify-content: center; } @media screen and (min-width: 960px) { .footer-SNS { justify-content: flex-start; margin: 25px 0 0 0; } } .footer-SNS__item { list-style: none; margin-right: 18px; } .footer-SNS__item:nth-last-of-type(1) { margin-right: 0; } .footer-SNS__item-bt--FB { opacity: 0.75; background: url(../image/icon_FB.html) no-repeat; text-indent: -9999px; display: block; width: 40px; height: 40px; background-size: contain; } .footer-SNS__item-bt--FB:hover { opacity: 1.0; } .footer-SNS__item-bt--TW { opacity: 0.75; background: url(../image/icon_TW.html) no-repeat; text-indent: -9999px; display: block; width: 40px; height: 40px; background-size: contain; } .footer-SNS__item-bt--TW:hover { opacity: 1.0; } .footer-nav { margin-top: 20px; } @media screen and (min-width: 600px) { .footer-nav { display: flex; justify-content: space-between; margin-top: 40px; } } @media screen and (min-width: 960px) { .footer-nav { justify-content: flex-start; margin-top: 0; width: 70%; } } .footer-nav__column { padding: 0; text-align: left; margin: 0; } .footer-nav__column:nth-last-child(1) { border-bottom: 1px solid white; } @media screen and (min-width: 600px) { .footer-nav__column { margin: 0; } .footer-nav__column:nth-last-child(1) { border-bottom: none; } } @media screen and (min-width: 960px) { .footer-nav__column { margin: 0 0 0 10.3%; } } .footer-nav__item { list-style-type: none; margin: 0; } @media screen and (min-width: 600px) { .footer-nav__item { margin: 0 0 28px 0; } } @media screen and (min-width: 960px) { .footer-nav__item { font-size: 1.3rem; } } .footer-nav__item-link, .footer-nav__child-item-link { color: white; text-decoration: none; display: block; border-top: 1px solid white; padding: 15px 0; letter-spacing: 0.05rem; } @media screen and (min-width: 600px) { .footer-nav__item-link, .footer-nav__child-item-link { opacity: 0.75; border-top: none; padding: 0; white-space: nowrap; } } .footer-nav__item-link:hover, .footer-nav__child-item-link:hover { color: white; opacity: 1.0; } .footer-nav__child { margin: 0 0 5px 1em; padding: 0; text-align: left; } .footer-nav__child:nth-last-child(1) { margin-right: 0; } @media screen and (min-width: 960px) { .footer-nav__child { font-size: 1.2rem; } } .footer-nav__child-item { margin: 0; list-style-type: none; } .footer-nav__child-item-link { border-top-color: rgba(255, 255, 255, 0.6); } @media screen and (min-width: 600px) { .footer-nav__child-item-link { margin: 8px 0 0 0; padding: 3px 0; opacity: 0.55; } } .copyright { background-color: white; color: #333333; padding: 1em 0; } .copyright a { color: inherit; } .copyright a:hover { color: inherit; } .header-nav-bt { height: 36px; width: 30px; padding: 0; display: flex; flex-direction: column; justify-content: flex-end; cursor: default; margin: 0 0 0 10px; } @media screen and (min-width: 600px) { .header-nav-bt { height: 37px; width: 35px; margin: 0 0 0 15px; } } @media screen and (min-width: 960px) { .header-nav-bt { display: none; } } .header-nav-bt__line--top, .header-nav-bt__line--middle, .header-nav-bt__line--bottom { background: #505050; height: 3px; width: 25px; margin: 5px auto 0; display: block; transition: all 0.3s ease; } .header-nav-bt__line--top { margin-top: 0; } @media screen and (min-width: 600px) { .header-nav-bt__line { width: 35px; margin: 6px auto 0; } } .header-nav-bt__text { font-size: 10px; margin: 3px 0 0 0; line-height: 1; text-align: center; color: #505050; font-weight: bold; } .header-nav-bt__text--menu { display: inline-block; } .header-nav-bt__text--close { display: none; } @media screen and (min-width: 600px) { .header-nav-bt__text { font-size: 12px; } } .active .header-nav-bt__line--top { -ms-transform: rotate(45deg) translateX(6px) translateY(6px); -webkit-transform: rotate(45deg) translateX(6px) translateY(6px); transform: rotate(45deg) translateX(6px) translateY(6px); } @media screen and (min-width: 600px) { .active .header-nav-bt__line--top { -ms-transform: rotate(45deg) translateX(7px) translateY(7px); -webkit-transform: rotate(45deg) translateX(7px) translateY(7px); transform: rotate(45deg) translateX(7px) translateY(7px); } } .active .header-nav-bt__line--middle { opacity: 0; } .active .header-nav-bt__line--bottom { -ms-transform: rotate(-45deg) translateX(5px) translateY(-6px); -webkit-transform: rotate(-45deg) translateX(5px) translateY(-6px); transform: rotate(-45deg) translateX(5px) translateY(-6px); } .active .header-nav-bt__text--menu { display: none; } .active .header-nav-bt__text--close { display: inline-block; } .header-nav-list__item .header-nav-bt, .header-nav-list .header-sub-nav__item .header-nav-bt { position: absolute; top: 0; right: 0; padding: 10px 10px 19px; height: 55px; width: 53px; } .header-nav-list__item .header-nav-bt__line--top, .header-nav-list .header-sub-nav__item .header-nav-bt__line--top { transition: none; height: 0.12em; width: 14px; transform: rotate(90deg) translateX(0px) translateY(0px); } .header-nav-list__item .header-nav-bt__line--bottom, .header-nav-list .header-sub-nav__item .header-nav-bt__line--bottom { transition: none; height: 0.12em; width: 14px; transform: rotate(0deg) translateX(0px) translateY(-7px); } .main-visual { height: 130px; overflow-y: hidden; position: relative; } @media screen and (min-width: 600px) { .main-visual { height: 200px; } } @media screen and (min-width: 960px) { .main-visual { height: 250px; } } .main-visual__image { width: 100%; position: relative; top: 50%; } .main-visual__text { height: 130px; line-height: 130px; font-size: 26px; text-align: center; padding: 0 10px; margin: 0; letter-spacing: 0.1rem; font-weight: normal; color: white; position: absolute; top: 0; left: 0; right: 0; width: 100%; z-index: 1; } @media screen and (min-width: 600px) { .main-visual__text { height: 200px; line-height: 200px; font-size: 30px; } } @media screen and (min-width: 960px) { .main-visual__text { max-width: 1060px; margin: 0 auto; height: 250px; line-height: 250px; font-size: 35px; } } .main-visual:after { content: ""; display: block; /* background-color: $main-visual-layer;*/ background-color: rgba(0, 0, 0, 0); position: absolute; width: 100%; height: 100%; top: 0; } .breadcrumb { font-size: 1.3rem; color: #959899; padding: 10px; display: flex; justify-content: flex-start; max-width: 1060px; margin: 0 auto; flex-wrap: wrap; } @media screen and (min-width: 960px) { .breadcrumb { padding: 10px 0; } } .breadcrumb__item { list-style-type: none; } .breadcrumb__item:not(:nth-last-of-type(1)):after { content: ">"; padding: 0 5px; color: #d1d1d1; } .breadcrumb__item-link { font-size: 1.3rem; color: #959899; } .breadcrumb__item-link:hover { color: #d64d54; } .HTMLBlock__inner { width: 100%; max-width: 1060px; margin: 0 auto; text-align: left; padding: 0 10px; } @media screen and (min-width: 600px) { .HTMLBlock__inner { padding: 0 15px; } } @media screen and (min-width: 960px) { .HTMLBlock__inner { padding: 45px 0 0 0; } } .pagination { display: flex; justify-content: center; align-items: center; margin: 40px 0 60px; } .pagination__list { display: flex; justify-content: center; margin: 0; padding: 0; } .pagination__list li { list-style: none; } .pagination__list a { display: block; width: 40px; height: 40px; line-height: 40px; margin: 0 10px; text-decoration: none; border: 1px solid #d1d1d1; background-color: white; border-radius: 3px; color: #505050; text-align: center; } @media screen and (min-width: 960px) { .pagination__list a { margin: 0 5px; } } .pagination__list a:not(.disable):hover { border: 1px solid #505050; background-color: white; color: #505050; } .pagination__list a.disable { display: block; border: 1px solid #d1d1d1; background-color: white; color: #d1d1d1; } .pagination__list .currentPage .disable { display: block; border: 1px solid #505050; background-color: #505050; color: white; } .pagination__arrow a, .pagination__arrow a { color: #b3242b; text-decoration: none; } .pagination__arrow a:hover, .pagination__arrow a:hover { color: #d64d54; } .pagination__arrow a.disable, .pagination__arrow a.disable { opacity: 0.3; } .pagination .ltgray { color: #0b60a3; opacity: 0.3; } .pagination .icon-next, .pagination .icon-prev { margin: 0 10px; } @media screen and (min-width: 960px) { .pagination .icon-next, .pagination .icon-prev { margin: 0 10px; } } .content-block .pagination { margin-bottom: 0; } .item-list-block { max-width: 1060px; margin: auto; padding: 0 10px; } @media screen and (min-width: 960px) { .item-list-block { padding: 45px 0 0 0; } } .list-title { padding: 0; margin-bottom: 40px; text-align: left; } .list-title h1 { position: relative; font-weight: 700; font-size: 2.0rem; margin: 0 0 1em; } .list-title h1:before { content: ""; width: 100%; height: 2px; background-color: #d1d1d1; position: absolute; bottom: 0; left: 0; } .list-title h1:after { content: ""; width: 100px; height: 2px; background-color: #b3242b; position: absolute; bottom: 0; left: 0; } @media screen and (min-width: 960px) { .list-title h1 { font-size: 2.8rem; margin-top: 0; } } .list-title h2 { font-weight: 700; font-size: 2.0rem; margin: 0 0 1em; } @media screen and (min-width: 960px) { .list-title h2 { font-size: 2.8rem; margin-top: 0; } } .list-title h4 { position: relative; font-weight: 700; font-size: 2.0rem; margin: 0 0 1em; } .list-title h4:before { content: ""; width: 100%; height: 2px; background-color: #d1d1d1; position: absolute; bottom: 0; left: 0; } .list-title h4:after { content: ""; width: 100px; height: 2px; background-color: #b3242b; position: absolute; bottom: 0; left: 0; } @media screen and (min-width: 960px) { .list-title h4 { font-size: 2.2rem; margin-top: 0; padding: 0 0 8px; } } .item-list { padding: 0; margin: 0 0 45px 0; } @media screen and (min-width: 600px) { .item-list { display: flex; flex-wrap: wrap; justify-content: space-between; } } p + .item-list { padding: 17px 0 0 0; } .item-list__item { margin-bottom: 20px; position: relative; text-align: center; list-style: none; overflow: hidden; transition: box-shadow 0.3s ease; padding-bottom: 45px; } .item-list__item:hover { box-shadow: 0 0 2px 2px rgba(80, 80, 80, 0.2); } @media screen and (min-width: 600px) { .item-list__item { width: 49%; margin-bottom: 2%; } } @media screen and (min-width: 960px) { .item-list__item { width: 32%; } } .item-list__item-link { text-decoration: none; } .item-list__item-image-box { display: block; } @media screen and (min-width: 600px) { .item-list__item-image-box { width: 100%; height: 225px; overflow: hidden; } } .item-list__item-image { display: block; margin: 0 auto; padding: 0; max-width: 100%; text-align: center; } .item-list__item-label { position: absolute; top: 15px; left: 15px; font-size: 1.2rem; padding: 3px 10px; border-radius: 15px; border: 1px solid #dedede; background-color: white; color: #676767; } .item-list__item-title { margin: 15px 25px 0; font-size: 1.8rem; color: #333333; font-weight: 700; text-align: left; letter-spacing: 0.05rem; line-height: 2.8rem; } @media screen and (min-width: 600px) { .item-list__item-title { /* height: 3em;*/ height: auto; overflow: hidden; } } .item-list__item-date { font-size: 1.3rem; color: #909090; text-align: left; margin: 12px 25px 0; } .item-list__item-description { color: #333333; margin: 12px 25px 0; font-size: 1.4rem; text-align: left; /* max-height: 8em;*/ overflow: hidden; } @media screen and (min-width: 600px) { .item-list__item-description { height: 8em; } } .item-list__item-bt { cursor: pointer; color: white; background-color: #b3242b; border: 1px solid inherit; text-decoration: none; padding: 18px 0; white-space: nowrap; display: block; line-height: 1; letter-spacing: 0.1rem; margin: auto; transition: all 0.3s ease; margin: 30px 25px 0; font-weight: 300; } .item-list__item-bt:hover { color: white; background-color: #d64d54; border: 1px solid inherit; } .item-list__item:hover .item-list__article-bt { background-color: #d64d54; } .item-list--small { padding: 0; margin: 0 0 45px 0; } @media screen and (min-width: 600px) { .item-list--small { display: flex; flex-wrap: wrap; justify-content: space-between; } } @media screen and (min-width: 960px) { .item-list--small { justify-content: center; } } .item-list--small .item-list__item { width: 280px; margin: 0 30px 40px; padding-bottom: 20px; } @media screen and (min-width: 600px) { .item-list--small .item-list__item { margin: 0; width: 30%; } } @media screen and (min-width: 960px) { .item-list--small .item-list__item { margin: 0 30px; width: 280px; } } .item-list--small .item-list__item-image-box { height: 110px; overflow: hidden; } .item-list--small .item-list__item-title { height: auto; text-align: center; } .item-list--small .item-list__item-description { height: auto; text-align: center; } .item-list--line { padding: 0; margin: 0; text-align: left; } .item-list--line .item-list__item { width: 100%; margin: 0 0 40px; padding: 0; text-align: left; } .item-list--line .item-list__item:hover { box-shadow: none; } .item-list--line .item-list__item-title { margin: 0; height: auto; } .item-list--line .item-list__item-title .item-list__item-link { color: #333333; } .item-list--line .item-list__item-description { height: auto; margin: 5px 0; line-height: normal; } .item-list--line .item-list__item-info { margin: 0; font-size: 1.3rem; color: #909090; } @media screen and (min-width: 600px) { .item-list:not(.item-list--line) .item-list__item { width: 49%; margin-bottom: 2%; } } .item-list:not(.item-list--line) .item-list__article-description { margin-bottom: 30px; } .item-list-row { padding: 0; } @media screen and (min-width: 960px) { .item-list-row { max-width: 1060px; margin: auto; } } .item-list-row__item { display: block; border-top: 1px solid #d1d1d1; text-align: left; padding: 20px 0; } @media screen and (min-width: 960px) { .item-list-row__item { padding: 25px 0; } } .item-list-row__item:nth-last-child(1) { border-bottom: 1px solid #d1d1d1; } .item-list-row__item-link { text-decoration: none; } .item-list-row__item-box { display: flex; align-items: baseline; flex-wrap: wrap; } @media screen and (min-width: 960px) { .item-list-row__item-box { flex-wrap: nowrap; } } .item-list-row__item-date { color: #aaaaaa; font-size: 1.3rem; white-space: nowrap; } .item-list-row__item-label { font-size: 1.2rem; padding: 3px 10px; border-radius: 15px; border: 1px solid #dedede; background-color: white; color: #676767; white-space: nowrap; margin: 0 20px; padding: 0; width: 110px; text-align: center; flex-shrink: 0; } .item-list-row__item-description { color: #333333; margin-top: 15px; } @media screen and (min-width: 960px) { .item-list-row__item-description { width: 100%; margin-top: 0; font-size: 1.4rem; } } .item-list-row__item-link:hover .item-list-row__item-description { color: #d64d54; } .aside-item-list { padding: 17px 0 0 0; margin: 0; } .aside-item-list__item { border: 1px solid #d1d1d1; border-radius: 3px; margin-bottom: 20px; position: relative; text-align: center; list-style: none; overflow: hidden; transition: box-shadow 0.3s ease; } .aside-item-list__item:hover { box-shadow: 0 0 2px 2px rgba(80, 80, 80, 0.2); } .aside-item-list__item-link { text-decoration: none; } .aside-item-list__item-image-box { display: block; width: 100px; height: 100px; overflow: hidden; position: relative; float: left; } .aside-item-list__item-image { display: block; margin: 0 auto; padding: 0; max-height: 100px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .aside-item-list__item-label { position: absolute; top: 15px; left: 15px; font-size: 1.2rem; padding: 3px 10px; border-radius: 15px; border: 1px solid #dedede; background-color: white; color: #676767; } .aside-item-list__item-title { padding: 10px 10px 0; font-size: 1.4rem; color: #333333; font-weight: 700; text-align: left; letter-spacing: 0.05rem; height: 5em; line-height: 1.3; overflow: hidden; } .aside-item-list__item-date { font-size: 1.2rem; color: #909090; text-align: left; padding: 0 10px 10px; overflow: hidden; } .aside-item-list__item-description { color: #333333; margin: 12px 25px 0; font-size: 14px; text-align: left; line-height: 1.7; max-height: 8em; overflow: hidden; } @media screen and (min-width: 600px) { .aside-item-list__item-description { height: 8em; } } .aside-item-list .aside-item-list__item-box:hover .aside-item-list__description { color: #333333; } .aside .HTMLBlock:nth-of-type(1) h3:nth-of-type(1) { margin-top: 0; } .aside-link-list, .aside-link-list--no-head { padding: 0; margin: 0; text-align: left; } .aside-link-list--no-head { border-top: 2px solid #b3242b; } .aside-link-list__item { border-bottom: 1px solid #d1d1d1; list-style: none; text-align: left; } .aside-link-list__item-link, .aside-link-list__item-link--child { color: #333333; font-size: 1.5rem; text-decoration: none; display: block; padding: 13px 0; } .aside-link-list__item-link--child { padding-left: 13px; } .aside-link-list__item-link:before, .aside-link-list__item-link--child:before { content: ">"; color: #d1d1d1; font-size: 1.2rem; position: relative; top: -2px; padding: 0 10px 0 5px; } .aside .blogSideForm { border: 2px solid #b3242b; border-radius: 3px 3px 0 0; border-bottom-width: 0; font-size: 1.4rem; padding: 0 15px 15px; text-align: left; } .aside .blogSideForm_title { font-size: 2.0rem; font-weight: 600; text-align: center; } .aside .innova-form.blogSideForm_form { border: 2px solid #b3242b; border-radius: 0 0 3px 3px; border-top-width: 0; font-size: 1.4rem; padding: 0 15px 15px; text-align: left; display: flex; } .aside .innova-form.blogSideForm_form .innovaFormLabel_main { display: none; } .aside .innova-form.blogSideForm_form .innova-form-item { width: 70%; padding: 0; } .aside .innova-form.blogSideForm_form .innova-form-item .ccm-input-text { height: 45px; width: 100%; border: 1px solid #d1d1d1; padding: 0 5px; } .aside .innova-form.blogSideForm_form .innova-form-item .innova-form-error-message { text-align: left; color: red; font-size: 1.3rem; margin-top: 3px; } .aside .innova-form.blogSideForm_form .innovaForm_submitWrap { text-decoration: none; margin-left: 5px; } .aside .innova-form.blogSideForm_form .innovaForm_submitWrap .btn { color: white; background-color: #b3242b; border: 1px solid inherit; text-decoration: none; padding: 18px 0; white-space: nowrap; display: block; line-height: 1; letter-spacing: 0.1rem; margin: auto; transition: all 0.3s ease; letter-spacing: 2px; padding: 5px 20px; margin-left: 5px; cursor: pointer; border: none; opacity: 0; height: 45px; margin-top: -45px; margin-left: 0; } .aside .innova-form.blogSideForm_form .innovaForm_submitWrap .btn:hover { color: white; background-color: #d64d54; border: 1px solid inherit; } .aside .innova-form.blogSideForm_form .innovaForm_submitWrap:before { content: "登録"; color: white; background-color: #b3242b; border: 1px solid inherit; text-decoration: none; padding: 18px 0; white-space: nowrap; display: block; line-height: 1; letter-spacing: 0.1rem; margin: auto; transition: all 0.3s ease; letter-spacing: 2px; padding: 5px 20px; margin-left: 5px; cursor: pointer; border: none; color: #505050; background-color: #d1d1d1; border: 1px solid #d1d1d1; width: 100%; display: table-cell; vertical-align: middle; height: 45px; font-size: 1.4rem; } .aside .innova-form.blogSideForm_form .innovaForm_submitWrap:before:hover { color: white; background-color: #d64d54; border: 1px solid inherit; } .aside .innova-form.blogSideForm_form .innovaForm_submitWrap:before:hover { color: white; background-color: #505050; border: 1px solid #505050; } .aside .innova-form.blogSideForm_form .innovaForm_submitWrap:hover:before { color: white; background-color: #505050; border: 1px solid #505050; } .aside h3 { font-size: 1.5rem; border-bottom: 2px solid #b3242b; text-align: left; margin: 50px 0 5px; } .aside h4 { font-size: 1.6rem; font-weight: 600; margin: 0; } @media screen and (min-width: 600px) { .aside h4 { font-size: 1.8rem; } } .aside h4:after { content: ""; display: block; width: 25px; height: 3px; background-color: rgba(80, 80, 80, 0.3); margin: 10px auto 10px auto; } @media screen and (min-width: 960px) { .aside h4:after { margin-bottom: 20px; } } .blog-article { text-align: left; } .blog-article__title-box { padding: 0px; position: relative; } @media screen and (min-width: 600px) { .blog-article__title-box { border: 1px solid #d1d1d1; padding: 20px; } } .blog-article__label { display: inline-block; font-size: 1.2rem; padding: 3px 10px; border-radius: 15px; border: 1px solid #dedede; background-color: white; color: #676767; } .blog-article__title { font-size: 25px; font-weight: 700; } .blog-article__date { font-size: 1.3rem; color: #909090; text-align: right; margin: 0; } .blog-article__main-visual-box { margin: 20px 0 0 0; text-align: center; } .blog-article__main-visual { width: 100%; height: auto; } .blog-article h2 { position: relative; font-weight: 700; font-size: 2.2rem; margin: 1.33em 0 1em; } .blog-article h2:before { content: ""; width: 100%; height: 2px; background-color: #d1d1d1; position: absolute; bottom: 0; left: 0; } .blog-article h2:after { content: ""; width: 100px; height: 2px; background-color: #b3242b; position: absolute; bottom: 0; left: 0; } @media screen and (min-width: 960px) { .blog-article h2 { margin-top: 2em; font-size: 2.0rem; } } .blog-article h3 { font-weight: 700; font-size: 2.0rem; border-left: 6px solid #b3242b; padding-left: 10px; line-height: 1.3; margin: 1.33em 0 1em; } @media screen and (min-width: 960px) { .blog-article h3 { margin-top: 2em; } } .blog-article .social-share { display: flex; align-items: flex-end; flex-wrap: wrap; margin: 60px 0 0; } .blog-article .social-share .fb_iframe_widget, .blog-article .social-share .hatena-bookmark-button-frame, .blog-article .social-share .tumblr-button, .blog-article .social-share .IN-widget, .blog-article .social-share div, .blog-article .social-share iframe { margin-right: 5px; } .center-block, .center-block--colored, .center-block--colored--wide { padding: 0 20px 10px; text-align: center; margin-bottom: 40px; padding: 25px; } @media screen and (min-width: 960px) { .center-block, .center-block--colored, .center-block--colored--wide { padding: 50px; max-width: 1060px; margin: 60px auto; } } .center-block--colored, .center-block--colored--wide { background-color: rgba(209, 209, 209, 0.3); } .center-block--colored--wide { max-width: none; } .center-block__h2, .center-block__h2--simple { font-size: 1.6rem; font-weight: 600; } @media screen and (min-width: 600px) { .center-block__h2, .center-block__h2--simple { font-size: 1.8rem; } } @media screen and (min-width: 960px) { .center-block__h2, .center-block__h2--simple { font-size: 2.0rem; } } .center-block__h2:after, .center-block__h2--simple:after { content: ""; display: block; width: 30px; height: 3px; background-color: rgba(80, 80, 80, 0.3); margin: 15px auto 30px auto; } @media screen and (min-width: 960px) { .center-block__h2:after, .center-block__h2--simple:after { margin-bottom: 40px; } } .center-block__h2--simple { font-weight: 600; font-size: 2.2rem; } .center-block__h2--simple:after { display: none; } .center-block__h3 { font-size: 2.3rem; margin: 0 auto 30px auto; color: #b3242b; } @media screen and (min-width: 960px) { .center-block__h3 { font-size: 2.8rem; margin: 0 auto 40px auto; } } .center-block__h4 { font-size: 2.0rem; font-weight: 600; } .center-block__h4 span { font-size: 1.6rem; font-weight: normal; } .center-block .button-box, .center-block--colored .button-box, .center-block--colored--wide .button-box { text-align: center; margin: 0 auto; } @media screen and (min-width: 600px) { .center-block .button-box, .center-block--colored .button-box, .center-block--colored--wide .button-box { display: flex; justify-content: space-around; } } .center-block .button-box .bt, .center-block--colored .button-box .bt, .center-block--colored--wide .button-box .bt { color: white; background-color: #b3242b; border: 1px solid inherit; text-decoration: none; padding: 18px 0; white-space: nowrap; display: block; line-height: 1; letter-spacing: 0.1rem; margin: auto; transition: all 0.3s ease; line-height: inherit; padding: 18px 15%; margin: 0 0 30px; } .center-block .button-box .bt:hover, .center-block--colored .button-box .bt:hover, .center-block--colored--wide .button-box .bt:hover { color: white; background-color: #d64d54; border: 1px solid inherit; } @media screen and (min-width: 600px) { .center-block .button-box .bt, .center-block--colored .button-box .bt, .center-block--colored--wide .button-box .bt { margin: 0 auto; } } .text-on-image, .text-on-image--wide, .text-on-image--responsive { display: flex; position: relative; padding: 0; margin: 40px 0; } @media screen and (min-width: 600px) { .text-on-image, .text-on-image--wide, .text-on-image--responsive { align-items: center; } .text-on-image:after, .text-on-image--wide:after, .text-on-image--responsive:after { content: ""; display: block; padding-top: 280px; } } @media screen and (min-width: 960px) { .text-on-image, .text-on-image--wide, .text-on-image--responsive { align-items: center; max-width: 1060px; margin: 60px auto; } .text-on-image:after, .text-on-image--wide:after, .text-on-image--responsive:after { display: none; } } .text-on-image__bg { margin: auto; } .text-on-image__bg img { border-radius: 5px; width: 100%; max-width: 375px; } @media screen and (min-width: 600px) { .text-on-image__bg img { max-width: none; } } @media screen and (min-width: 960px) { .text-on-image__bg img { max-width: 1060px; } } .text-on-image__text, .text-on-image__text--left { background-color: rgba(255, 255, 255, 0.7); position: absolute; bottom: 0; width: 100%; padding: 0; margin: 0; } @media screen and (min-width: 600px) { .text-on-image__text, .text-on-image__text--left { right: 30px; bottom: auto; padding: 10px; min-width: 440px; } } @media screen and (min-width: 960px) { .text-on-image__text, .text-on-image__text--left { padding: 20px; } } .text-on-image__text--left { right: auto; } .text-on-image .center-block__h2, .text-on-image--wide .center-block__h2, .text-on-image--responsive .center-block__h2, .text-on-image .center-block__h2--simple, .text-on-image--wide .center-block__h2--simple, .text-on-image--responsive .center-block__h2--simple { font-size: 1.6rem; } .text-on-image .center-block__h2:after, .text-on-image--wide .center-block__h2:after, .text-on-image--responsive .center-block__h2:after, .text-on-image .center-block__h2--simple:after, .text-on-image--wide .center-block__h2--simple:after, .text-on-image--responsive .center-block__h2--simple:after { margin-bottom: 20px; } .text-on-image__h4 { margin-top: 0; font-size: 1.8rem; font-weight: 600; } @media screen and (min-width: 960px) { .text-on-image__h4 { font-size: 2.2rem; } } .text-on-image__h4 span { font-size: 1.6rem; font-weight: normal; } .text-on-image__title { margin-bottom: 30px; font-size: 2.3rem; } @media screen and (min-width: 600px) { .text-on-image__title { margin-bottom: 20px; font-size: 3.0rem; } } .text-on-image .button-box, .text-on-image--wide .button-box, .text-on-image--responsive .button-box { text-align: center; margin: 0 auto; margin: 30px auto 20px; max-width: 335px; } @media screen and (min-width: 600px) { .text-on-image .button-box, .text-on-image--wide .button-box, .text-on-image--responsive .button-box { display: flex; justify-content: space-around; } } .text-on-image .button-box .bt, .text-on-image--wide .button-box .bt, .text-on-image--responsive .button-box .bt { color: white; background-color: #b3242b; border: 1px solid inherit; text-decoration: none; padding: 18px 0; white-space: nowrap; display: block; line-height: 1; letter-spacing: 0.1rem; margin: auto; transition: all 0.3s ease; line-height: inherit; padding: 18px 15%; margin: 0 0 30px; } .text-on-image .button-box .bt:hover, .text-on-image--wide .button-box .bt:hover, .text-on-image--responsive .button-box .bt:hover { color: white; background-color: #d64d54; border: 1px solid inherit; } @media screen and (min-width: 600px) { .text-on-image .button-box .bt, .text-on-image--wide .button-box .bt, .text-on-image--responsive .button-box .bt { margin: 0 auto; } } @media screen and (min-width: 600px) { .text-on-image .button-box, .text-on-image--wide .button-box, .text-on-image--responsive .button-box { max-width: none; } } .text-on-image .button-box .bt, .text-on-image--wide .button-box .bt, .text-on-image--responsive .button-box .bt { padding: 8px 15%; } .text-on-image--wide { margin-top: 0; } @media screen and (min-width: 960px) { .text-on-image--wide { display: block; } } .text-on-image--wide .text-on-image__bg { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); max-height: 700px; overflow-y: hidden; } .text-on-image--wide .text-on-image__bg img { border-radius: 0; max-width: none; } .text-on-image--wide .text-on-image__text, .text-on-image--wide .text-on-image__text--left { top: 48%; transform: translateY(-50%); } @media screen and (min-width: 960px) { .text-on-image--responsive { display: block; } } .text-on-image--responsive .text-on-image__bg { max-height: 280px; overflow-y: hidden; } .text-on-image--responsive .text-on-image__bg img { border-radius: 0; max-width: none; } .text-on-image--responsive .text-on-image__text, .text-on-image--responsive .text-on-image__text--left { top: 50%; transform: translateY(-50%); background: none; width: 100%; padding: 0 10px; } @media screen and (min-width: 600px) { .text-on-image--responsive .text-on-image__text, .text-on-image--responsive .text-on-image__text--left { padding: 0 20px; } } .text-on-image--responsive .text-on-image__title { font-size: 2.0rem; text-align: left; margin: 0; } @media screen and (min-width: 600px) { .text-on-image--responsive .text-on-image__title { font-size: 2.8rem; color: white; } } .text-above-image { position: relative; padding: 0; } @media screen and (min-width: 600px) { .text-above-image { align-items: center; margin: 40px 0; } } .text-above-image__bg { margin: auto; max-height: 250px; display: flex; justify-content: center; align-items: center; overflow: hidden; } @media screen and (min-width: 600px) { .text-above-image__bg { max-height: 432px; } } .text-above-image__bg img { width: 160%; border-radius: 0; } @media screen and (min-width: 960px) { .text-above-image__bg img { width: 100%; } } .text-above-image__text { width: 100%; padding: 0; margin: 0; padding: 0 10px; } @media screen and (min-width: 600px) { .text-above-image__text { padding: 0 20px; } } @media screen and (min-width: 960px) { .text-above-image__text { padding: 0; max-width: 1060px; margin: 0 auto; } } .text-above-image__title { font-size: 2.2rem; text-align: left; margin: 30px 0; color: #b3242b; letter-spacing: 0.1rem; } @media screen and (min-width: 600px) { .text-above-image__title { margin: 40px 0; font-size: 3.2rem; } } @media screen and (min-width: 960px) { .text-above-image__title { margin: 60px 0; } } .item-index { padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; } p + .item-index { padding: 17px 0 0 0; } .item-index__item, .item-index__item--col4, .item-index__item--col2 { position: relative; text-align: center; list-style: none; } .item-index__item:hover, .item-index__item--col4:hover, .item-index__item--col2:hover { opacity: 0.8; } .item-index__item--col4 { width: 49%; margin-bottom: 10%; } @media screen and (min-width: 600px) { .item-index__item--col4 { width: 24%; margin-bottom: 2%; } } .item-index__item--col2 { width: 100%; margin-bottom: 2%; } @media screen and (min-width: 600px) { .item-index__item--col2 { width: 49%; } } .item-index__item-link { text-decoration: none; } .item-index__item-image-box { display: block; width: 100%; overflow: hidden; } .item-index__item-image { display: block; margin: 0 auto; padding: 0; width: 100%; text-align: center; transition: .2s; } .item-index .item-index__item-box:hover .item-index__item-image { transform: scale(1.1); } .item-index__item-label { font-size: 1.2rem; padding: 3px 10px; border-radius: 15px; border: 1px solid #dedede; background-color: white; color: #676767; display: inline-block; margin: 10px 0 0; } .item-index__item-title { margin: 10px 0 0; font-size: 1.4rem; color: #333333; font-weight: 700; padding: 0 10px; } .item-index__item-description { color: #333333; margin: 8px 0 0; font-size: 1.2rem; } .item-index--wide { padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; justify-content: center; margin: auto; } p + .item-index--wide { padding: 17px 0 0 0; } .item-index--wide__item, .item-index--wide__item--col4, .item-index--wide__item--col2 { position: relative; text-align: center; list-style: none; } .item-index--wide__item:hover, .item-index--wide__item--col4:hover, .item-index--wide__item--col2:hover { opacity: 0.8; } .item-index--wide__item--col4 { width: 49%; margin-bottom: 10%; } @media screen and (min-width: 600px) { .item-index--wide__item--col4 { width: 24%; margin-bottom: 2%; } } .item-index--wide__item--col2 { width: 100%; margin-bottom: 2%; } @media screen and (min-width: 600px) { .item-index--wide__item--col2 { width: 49%; } } .item-index--wide__item-link { text-decoration: none; } .item-index--wide__item-image-box { display: block; width: 100%; overflow: hidden; } .item-index--wide__item-image { display: block; margin: 0 auto; padding: 0; width: 100%; text-align: center; transition: .2s; } .item-index--wide .item-index--wide__item-box:hover .item-index--wide__item-image { transform: scale(1.1); } .item-index--wide__item-label { font-size: 1.2rem; padding: 3px 10px; border-radius: 15px; border: 1px solid #dedede; background-color: white; color: #676767; display: inline-block; margin: 10px 0 0; } .item-index--wide__item-title { margin: 10px 0 0; font-size: 1.4rem; color: #333333; font-weight: 700; padding: 0 10px; } .item-index--wide__item-description { color: #333333; margin: 8px 0 0; font-size: 1.2rem; } .item-index--wide__item, .item-index--wide__item--col4, .item-index--wide__item--col2 { margin: 0 0 60px; padding: 0 3%; } .item-index--wide__item--col2 { width: 100%; margin-bottom: 10%; } @media screen and (min-width: 600px) { .item-index--wide__item--col2 { width: 49%; margin-bottom: 5%; } } .item-index--wide__item-title { margin: 10px 0 0; font-size: 1.8rem; color: #333333; font-weight: 700; padding: 0; text-align: left; } .item-index--wide__item-description { color: #333333; margin: 8px 0 0; font-size: 1.4rem; text-align: left; } .index .text-on-image__bg img { height: 470px; } @media screen and (min-width: 960px) { .index .text-on-image__bg img { height: auto; } } .index .text-on-image__text--left { text-align: left; background-color: rgba(255, 255, 255, 0); color: white; padding: 20px !important; bottom: auto; } @media screen and (min-width: 960px) { .index .text-on-image__text--left { padding: 20px; } } .index .text-on-image__text--left h2 { font-size: 3.0rem; letter-spacing: 0.5rem; text-shadow: 0px 0px 3px #b3242b,0px 0px 3px #b3242b,0px 0px 3px #b3242b; } @media screen and (min-width: 960px) { .index .text-on-image__text--left h2 { font-size: 4.5rem; margin: 20px 0; } } .index .text-on-image__text--left p { letter-spacing: 0.2rem; text-shadow: 0px 0px 3px #b3242b,0px 0px 3px #b3242b,0px 0px 3px #b3242b; font-size: 1.6rem; font-weight: bold; line-height: 2.4; } .index .button-box { margin-top: 30px; } .index .button-box__bt--ghost { color: white; background-color: #b3242b; border: 1px solid inherit; text-decoration: none; padding: 18px 0; white-space: nowrap; display: block; line-height: 1; letter-spacing: 0.1rem; margin: auto; transition: all 0.3s ease; color: #333333; background-color: rgba(51, 51, 51, 0); border: 1px solid #333333; text-align: center; border-width: 1px; transition: ease-in-out .15s all; margin: 30px 40px; } .index .button-box__bt--ghost:hover { color: white; background-color: #d64d54; border: 1px solid inherit; } .index .button-box__bt--ghost:hover { color: white; background-color: #333333; border: 1px solid #333333; } @media screen and (min-width: 600px) { .index .button-box__bt--ghost { font-size: 1.6rem; padding: 2% 9%; display: inline-block; margin: 30px 40px 20px; } } @media screen and (min-width: 960px) { .index .button-box__bt--ghost { font-size: 1.6rem; padding: 22px 110px; display: inline-block; margin: 30px 40px 20px; } } .index .button-box__bt--ghost:hover { border-width: 1px; } .index .button-box--left__bt--white-ghost { color: white; background-color: #b3242b; border: 1px solid inherit; text-decoration: none; padding: 18px 0; white-space: nowrap; display: block; line-height: 1; letter-spacing: 0.1rem; margin: auto; transition: all 0.3s ease; color: white; background-color: rgba(255, 255, 255, 0); border: 1px solid white; text-align: center; border-width: 1px; transition: ease-in-out .15s all; margin: 30px 40px 0; } .index .button-box--left__bt--white-ghost:hover { color: white; background-color: #d64d54; border: 1px solid inherit; } .index .button-box--left__bt--white-ghost:hover { color: #333333; background-color: white; border: 1px solid white; } @media screen and (min-width: 600px) { .index .button-box--left__bt--white-ghost { padding: 3% 10%; font-size: 1.5rem; display: inline-block; margin: 30px 0; } } .index .button-box--left__bt--white-ghost:hover { border-width: 1px; } .index .center-block, .index .center-block--colored, .index .center-block--colored--wide { padding-bottom: 40px; } @media screen and (min-width: 960px) { .index .center-block, .index .center-block--colored, .index .center-block--colored--wide { padding-bottom: 75px; } } .index .center-block__h2, .index .center-block__h2--simple { font-size: 2.0rem; font-weight: 600; margin: 40px auto; } @media screen and (min-width: 960px) { .index .center-block__h2, .index .center-block__h2--simple { font-size: 2.0rem; } } .index .center-block__h2:after, .index .center-block__h2--simple:after { content: ""; display: block; width: 35px; height: 3px; background-color: rgba(80, 80, 80, 0.3); margin: 15px auto 30px auto; } @media screen and (min-width: 960px) { .index .center-block__h2:after, .index .center-block__h2--simple:after { margin-bottom: 40px; } } .index .center-block__h3 { font-size: 2.8rem; margin: 40px auto; } @media screen and (min-width: 960px) { .index .center-block__h3 { font-size: 3.8rem; margin: 90px auto 80px; } } .index .center-block__p { line-height: 3.5rem; } @media screen and (min-width: 960px) { .index .center-block__p { font-size: 1.5rem; letter-spacing: 0.2rem; width: 780px; margin: auto; } } .index .item-list { margin: auto; } @media screen and (min-width: 960px) { .index .item-list { max-width: 1060px; } } .index .item-list__item { background-color: white; } @media screen and (min-width: 960px) { .index .item-list__item { width: 30.3%; } } @media screen and (min-width: 960px) { .index .item-list__item-image-box { height: 200px; } } .table-block, .detail-block .thumbnail-table__table { width: 100%; } @media screen and (min-width: 960px) { .table-block, .detail-block .thumbnail-table__table { max-width: 1060px; margin: auto; position: relative; } } @media screen and (min-width: 960px) { .content-block .table-block, .content-block .detail-block .thumbnail-table__table, .detail-block .content-block .thumbnail-table__table { max-width: 740px; } } .table-block__tr { display: table-row; } @media screen and (min-width: 960px) { .table-block__tr { display: table-row; } } .table-block__tr:nth-of-type(1) { border-top: 1px solid #d1d1d1; } .table-block__tr--row { display: grid; grid-template-columns: 30% 1fr; border-top: 1px solid #d1d1d1; } .table-block__tr--row:nth-last-of-type(1) { border-bottom: 1px solid #d1d1d1; } @media screen and (min-width: 600px) { .table-block__tr--row { grid-template-columns: 16% 13% 1fr; } } .table-block__th, .table-block__th--colored, .table-block__th--row, .table-block__th--col, .table-block__th--dl { font-weight: 300; font-size: 1.5rem; white-space: nowrap; display: block; padding: 13px 10px; border: 1px solid #d1d1d1; border-width: 0 0 0 0; vertical-align: top; text-align: center; } @media screen and (min-width: 960px) { .table-block__th, .table-block__th--colored, .table-block__th--row, .table-block__th--col, .table-block__th--dl { border-width: 0 0 1px 0; padding: 20px 10px; display: table-cell; text-align: left; } } .table-block__th--colored { background-color: #fafafa; vertical-align: top; border-width: 0 0 1px 0; padding: 13px 0; } @media screen and (min-width: 960px) { .table-block__th--colored { padding: 20px 30px; } } .table-block__th--row { width: 100%; text-align: left; padding: 0; border-width: 0; display: block; grid-row: 1 / 2; grid-column: 1 / 3; padding-top: 13px; } @media screen and (min-width: 600px) { .table-block__th--row { grid-row: 1 / 3; grid-column: 1 / 2; padding: 20px 0 0 26%; } } .table-block__th--col { border-width: 0 0 1px 0; padding: 13px 2em 0 0; text-align: right; justify-self: end; } @media screen and (min-width: 600px) { .table-block__th--col { display: block; padding: 20px 30% 0 0; margin-left: 0; } } .table-block__th--col:nth-last-of-type(1) { border-width: 0; } .table-block__th--dl { font-weight: 600; padding: 13px 10px 5px 10px; } @media screen and (min-width: 960px) { .table-block__th--dl { padding: 20px 10px; } } .table-block__td, .table-block__td--col, .table-block__td--dl { padding: 15px 10px; display: block; border: 1px solid #d1d1d1; border-width: 0 0 1px 0; text-align: center; font-size: 1.5rem; } @media screen and (min-width: 960px) { .table-block__td, .table-block__td--col, .table-block__td--dl { padding: 20px 0 20px 30px; margin-top: 0; text-align: left; display: table-cell; } } .table-block__td img, .table-block__td--col img, .table-block__td--dl img { max-width: 100%; } .table-block__td--col { width: auto; padding: 0; } .table-block__td--col:nth-last-of-type(1) { border-width: 0; } .table-block__td--col p { margin: 0; text-align: left; border: 1px solid #d1d1d1; border-width: 0 0 1px 0; padding: 13px 0; } .table-block__td--col p:nth-last-of-type(1) { border-width: 0; } @media screen and (min-width: 600px) { .table-block__td--col p { padding: 20px 0 19px; } } .table-block__td--dl { padding: 0 10px 15px 10px; } @media screen and (min-width: 960px) { .table-block__td--dl { padding: 20px 0 20px 30px; } } .button-block { margin: 0; padding: 0; } @media screen and (min-width: 960px) { .button-block { margin: auto; max-width: 1060px; display: table; border-spacing: 20px; } } .button-block__item { display: block; margin-bottom: 40px; } @media screen and (min-width: 960px) { .button-block__item { display: table-row; } } .button-block__item:nth-last-child(1) { margin-bottom: 0; } .button-block__bt { color: white; background-color: #b3242b; border: 1px solid inherit; text-decoration: none; padding: 18px 0; white-space: nowrap; display: block; line-height: 1; letter-spacing: 0.1rem; margin: auto; transition: all 0.3s ease; margin: 0; width: 100%; font-weight: normal; line-height: 2.7rem; } .button-block__bt:hover { color: white; background-color: #d64d54; border: 1px solid inherit; } @media screen and (min-width: 960px) { .button-block__bt { width: 39%; display: table-cell; padding: 16px 0; } } .button-block__bt-nohover-ghost { padding: 18px 0; border-radius: 3px; white-space: nowrap; display: block; line-height: 1; margin: auto; color: #333333; background-color: rgba(51, 51, 51, 0); border: 1px solid #333333; margin: 0; width: 100%; font-weight: normal; line-height: 2.7rem; } @media screen and (min-width: 960px) { .button-block__bt-nohover-ghost { width: 39%; display: table-cell; padding: 16px 0; } } .button-block__text { vertical-align: middle; font-size: 1.4rem; margin: 10px 0 0; text-align: left; } @media screen and (min-width: 960px) { .button-block__text { font-size: 1.6rem; padding-left: 20px; display: table-cell; } } .button-block--simple { margin: 0; padding: 0; } @media screen and (min-width: 960px) { .button-block--simple { margin: auto; max-width: 1060px; display: table; border-spacing: 20px; } } @media screen and (min-width: 960px) { .button-block--simple { width: 80%; } } .button-block--simple__item { display: block; margin-bottom: 40px; margin-bottom: 0; } @media screen and (min-width: 960px) { .button-block--simple__item { display: table-row; } } .button-block--simple__item:nth-last-child(1) { margin-bottom: 0; } @media screen and (min-width: 960px) { .button-block--simple__item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 40px; } } .button-block--simple__bt { color: white; background-color: #b3242b; border: 1px solid inherit; text-decoration: none; padding: 18px 0; white-space: nowrap; display: block; line-height: 1; letter-spacing: 0.1rem; margin: auto; transition: all 0.3s ease; margin: 0; width: 100%; font-weight: normal; line-height: 2.7rem; margin-bottom: 40px; } .button-block--simple__bt:hover { color: white; background-color: #d64d54; border: 1px solid inherit; } @media screen and (min-width: 960px) { .button-block--simple__bt { width: 39%; display: table-cell; padding: 16px 0; } } @media screen and (min-width: 960px) { .button-block--simple__bt { display: block; width: 47%; padding: 16px 0; margin-bottom: 0; } } .button-block--simple__bt-nohover-ghost { padding: 18px 0; border-radius: 3px; white-space: nowrap; display: block; line-height: 1; margin: auto; color: #333333; background-color: rgba(51, 51, 51, 0); border: 1px solid #333333; margin: 0; width: 100%; font-weight: normal; line-height: 2.7rem; } @media screen and (min-width: 960px) { .button-block--simple__bt-nohover-ghost { width: 39%; display: table-cell; padding: 16px 0; } } @media screen and (min-width: 960px) { .button-block--simple__bt-nohover-ghost { display: block; margin: auto; } } .button-block--simple__text { vertical-align: middle; font-size: 1.4rem; margin: 10px 0 0; text-align: left; } @media screen and (min-width: 960px) { .button-block--simple__text { font-size: 1.6rem; padding-left: 20px; display: table-cell; } } @media screen and (min-width: 960px) { .button-block--simple__text { display: block; width: 100%; text-align: center; } } .nongrid-block { margin: 30px 0; text-align: left; grid-auto-rows: auto; } @media screen and (min-width: 600px) { .nongrid-block { padding: 0 10px; } } @media screen and (min-width: 960px) { .nongrid-block { margin: 60px auto; max-width: 1060px; padding: 0; } } .nongrid-block > :nth-last-child(1) { margin-bottom: 60px; } .nongrid-block__text-box, .nongrid-block__text-box--left, .nongrid-block__text-box--right, .nongrid-block__text-box--center { background-color: rgba(255, 255, 255, 0.7); margin: 60px 10px 0; position: relative; z-index: 1; } @media screen and (min-width: 600px) { .nongrid-block__text-box, .nongrid-block__text-box--left, .nongrid-block__text-box--right, .nongrid-block__text-box--center { margin: 60px 0 60px; width: 60%; } } @media screen and (min-width: 960px) { .nongrid-block__text-box, .nongrid-block__text-box--left, .nongrid-block__text-box--right, .nongrid-block__text-box--center { margin: 60px 0 60px; width: 100%; } } @media screen and (min-width: 600px) { .nongrid-block__text-box--left { padding: 0 40px 10px 0; margin: 0 auto 0 0; } } @media screen and (min-width: 600px) { .nongrid-block__text-box--right { padding: 0 0 10px 40px; margin: 0 0 0 auto; } } @media screen and (min-width: 600px) { .nongrid-block__text-box--center { padding: 0 40px; width: 100%; } } .nongrid-block__image-box, .nongrid-block__image-box--left, .nongrid-block__image-box--right { width: 100%; margin: 30px 0; } @media screen and (min-width: 600px) { .nongrid-block__image-box, .nongrid-block__image-box--left, .nongrid-block__image-box--right { width: 48%; } } @media screen and (min-width: 960px) { .nongrid-block__image-box, .nongrid-block__image-box--left, .nongrid-block__image-box--right { width: 108%; } } @media screen and (min-width: 600px) { .nongrid-block__image-box--left { margin: -250px auto 60px 0; } } @media screen and (min-width: 600px) { .nongrid-block__image-box--right { margin: -250px 0 60px auto; } } .nongrid-block__image { width: 100%; } .nongrid-block__h4, .nongrid-block__h4--large { position: relative; font-weight: 700; font-size: 2.0rem; margin: 1.33em 0 1em; } .nongrid-block__h4:before, .nongrid-block__h4--large:before { content: ""; width: 100%; height: 2px; background-color: #d1d1d1; position: absolute; bottom: 0; left: 0; } .nongrid-block__h4:after, .nongrid-block__h4--large:after { content: ""; width: 100px; height: 2px; background-color: #b3242b; position: absolute; bottom: 0; left: 0; } @media screen and (min-width: 600px) { .nongrid-block__h4, .nongrid-block__h4--large { font-size: 2.2rem; margin-top: 2em; } } .nongrid-block__h4--large { font-size: 2.4rem; } @media screen and (min-width: 600px) { .nongrid-block__h4--large { font-size: 3.2rem; padding: 0 0 8px 0; } } .ol-has-title { counter-reset: item; list-style-type: none; padding-left: 0; margin-bottom: 0; } @media screen and (min-width: 600px) { .ol-has-title { margin-bottom: 1em; } } .ol-has-title li { margin-bottom: 30px; } .ol-has-title li:before { counter-increment: item; content: counter(item); padding-right: 5px; font-size: 3.4rem; color: #e5e5e5; font-family: Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace; font-style: italic; font-weight: 300; vertical-align: sub; } @media screen and (min-width: 600px) { .ol-has-title li:before { padding-right: 10px; font-size: 4.4rem; } } .ol-has-title li:nth-last-of-type(1) { margin-bottom: 0; } .ol-has-title[start="3"] { counter-reset: item 2; } .ol-has-title[start="5"] { counter-reset: item 4; } .ol-has-title__title { display: inline; font-size: 2.5rem; line-height: 1; } .ol-has-title__description { margin: 20px 0 40px; font-size: 1.5rem; } .innova-form { max-width: 1060px; margin: auto; display: block; } .innova-form .form-group { text-align: left; margin-bottom: 13px; line-height: 1.5; } .innova-form .innovaFormLabel_main { font-size: 1.5rem; } .innova-form .ccm-input-text { height: 45px; width: 100%; border: 1px solid #d1d1d1; padding: 0 5px; } .innova-form textarea.form-control { width: 100%; border: 1px solid #d1d1d1; padding: 0 5px; } .innova-form .ccm-input-checkbox { margin: 15px 5px 0 0; } .innova-form .innova-form-error-message { text-align: left; color: red; font-size: 1.3rem; margin-top: 3px; } .innova-form .required { margin-left: 3px; } .innova-form .innova-form-privacy { margin-top: 30px; text-align: center; } .innova-form .innovaFormLabel_main { display: block; } .innova-form .innovaForm_submitWrap { text-decoration: none; } .innova-form .innovaForm_submitWrap .btn { color: white; background-color: #b3242b; border: 1px solid inherit; text-decoration: none; padding: 18px 0; white-space: nowrap; display: block; line-height: 1; letter-spacing: 0.1rem; margin: auto; transition: all 0.3s ease; letter-spacing: 2px; padding: 5px 20px; margin-left: 5px; cursor: pointer; border: none; width: 100%; margin: 30px 0 0; padding: 18px 0; } .innova-form .innovaForm_submitWrap .btn:hover { color: white; background-color: #d64d54; border: 1px solid inherit; } @media screen and (min-width: 960px) { .innova-form .innovaForm_submitWrap .btn { padding: 10px 0; } } .aside .innova-form { margin-bottom: 60px; } @media screen and (min-width: 960px) { .aside .innova-form { padding: 0 10px; } } .main > .innova-form { margin-bottom: 60px; padding: 0 20px; } @media screen and (min-width: 960px) { .main > .innova-form { padding: 20px; } } @media screen and (min-width: 960px) { .main > .innova-form .form-group { width: 640px; margin: 13px auto 30px 0; clear: both; } } @media screen and (min-width: 960px) { .main > .innova-form .innova-form-sei, .main > .innova-form .innova-form-seikana { width: 300px; float: left; clear: both; margin: 13px 20px 30px 0; } } @media screen and (min-width: 960px) { .main > .innova-form .innova-form-mei, .main > .innova-form .innova-form-meikana { width: 300px; float: left; clear: none; margin: 13px auto 30px 0; } } @media screen and (min-width: 960px) { .main > .innova-form .ccm-input-checkbox { margin: 15px 5px 15px 20px; } } @media screen and (min-width: 960px) { .main > .innova-form .innovaForm_submitWrap { width: 640px; margin: 30px auto 13px 0; display: block; } .main > .innova-form .innovaForm_submitWrap .btn { width: 250px; padding: 15px 0; } } @media screen and (min-width: 960px) { .main > .innova-form .innova-form-privacy a { display: inline; } } .agenda-table { border-collapse: separate; border-spacing: 0; } @media screen and (min-width: 960px) { .agenda-table { border-spacing: 40px 10px; } } .agenda-table tr { vertical-align: top; } .agenda-table td { display: block; } @media screen and (min-width: 960px) { .agenda-table td { display: table-cell; } } .agenda-table td:not(.agenda-table__time) { padding-left: 10px; margin-left: 10px; border-left: 1px solid #d1d1d1; } @media screen and (min-width: 960px) { .agenda-table td:not(.agenda-table__time) { border: none; padding-left: 0; margin-left: 0; } } .agenda-table__time { vertical-align: top; position: relative; overflow-y: hidden; margin: 10px 0; } @media screen and (min-width: 960px) { .agenda-table__time { margin: 0; } .agenda-table__time:after { content: ""; width: 1px; border-left: 1px solid #d1d1d1; display: block; position: absolute; left: 50%; bottom: 0; top: 35px; height: 100%; } } .agenda-table__title { font-size: 1.8rem; color: inherit; border-bottom: 0; margin: 0; line-height: 1.5; font-weight: 600; } .agenda-table__faq { font-size: 1.8rem; color: inherit; border-bottom: 0; margin: 0; line-height: 1.5; padding: 40px 0; font-weight: 600; } .agenda-table__text { display: block; } @media screen and (min-width: 960px) { .agenda-table__text { display: table-cell; } } .agenda-table__name { font-weight: 600; margin-top: 0; } .agenda-table__name span { font-size: 1.3rem; font-weight: 300; display: block; } .agenda-table__portrait { width: auto; text-align: center; padding-bottom: 30px; } @media screen and (min-width: 960px) { .agenda-table__portrait { width: 200px; } } .agenda-table__portrait img { width: 55%; } @media screen and (min-width: 960px) { .agenda-table__portrait img { width: 100%; } } .agenda-table__profile { width: 100%; padding-bottom: 10px; } @media screen and (min-width: 960px) { .agenda-table__profile { width: 600px; padding-bottom: 40px; } } .detail-title { padding: 0 10px; font-size: 1.5rem; text-align: left; margin: 20px auto 0; } @media screen and (min-width: 960px) { .detail-title { max-width: 1060px; margin: 30px auto 0; padding: 0; } } .detail-title p { margin: 0; } @media screen and (min-width: 960px) { .detail-title p { margin: 0 0 5px 0; } } .detail-title h3 { font-weight: 700; font-size: 2.4rem; color: #333333; margin: 10px 0; } @media screen and (min-width: 960px) { .detail-title h3 { font-size: 2.8rem; } } .detail-title h2 { position: relative; font-weight: 600; font-size: 2.2rem; margin: 1.33em 0 1em; } .detail-title h2:before { content: ""; width: 100%; height: 2px; background-color: #d1d1d1; position: absolute; bottom: 0; left: 0; } .detail-title h2:after { content: ""; width: 100px; height: 2px; background-color: #b3242b; position: absolute; bottom: 0; left: 0; } @media screen and (min-width: 960px) { .detail-title h2 { font-size: 2.6rem; margin-top: 2em; } } .detail-title figure { margin: 1em 0; } .detail-title img { max-width: 100%; } .detail-block { padding: 0 10px 10px; text-align: left; clear: both; } @media screen and (min-width: 960px) { .detail-block { max-width: 1060px; margin: auto; padding: 0; } } .detail-block ul { padding: 0; } .detail-block ul li { margin: 0 0 10px 22px; } .detail-block ul.check li { list-style-type: none; margin: 0 0 10px 0; padding-left: 1.5em; text-indent: -0.7em; } @media screen and (min-width: 960px) { .detail-block ul.check li { margin: 0 0 10px 22px; } } .detail-block ul.check li:before { font-family: "my-fonts" !important; speak: none; font-size: 1.0rem; content: "\e906"; color: #767676; margin-right: 8px; vertical-align: middle; transform: scale(0.9); display: inline-block; } .detail-block h4 { position: relative; font-weight: 700; font-size: 1.8rem; margin: 1.33em 0 1em; } .detail-block h4:before { content: ""; width: 100%; height: 2px; background-color: #d1d1d1; position: absolute; bottom: 0; left: 0; } .detail-block h4:after { content: ""; width: 100px; height: 2px; background-color: #b3242b; position: absolute; bottom: 0; left: 0; } @media screen and (min-width: 960px) { .detail-block h4 { font-size: 2.2rem; margin-top: 2em; } } .detail-block h5 { font-weight: 700; font-size: 2.0rem; border-left: 6px solid #b3242b; padding-left: 10px; line-height: 1.3; margin: 1.33em 0 1em; } @media screen and (min-width: 960px) { .detail-block h5 { margin-top: 2em; } } .detail-block h6 { color: #143677; border-bottom: 1px solid #d1d1d1; font-size: 1.8rem; font-weight: 700; margin: 1.33em 0 1em; } @media screen and (min-width: 960px) { .detail-block h6 { margin-top: 2em; } } .detail-block dl dd { margin: 0 0 10px 1em; } .detail-block dl dd:nth-last-of-type(1) p:nth-last-child(1) { margin-bottom: 0; } .detail-block dl dd p:nth-child(1) { margin-top: 10px; } .detail-block dl dd p:nth-last-child(1) { margin-bottom: 40px; } .detail-block .dl--row { margin: 30px 0; } .detail-block .dl--row dt { margin: 0 10px; width: 40px; float: left; } .detail-block .dl--row dt:nth-of-type(1) { width: 100%; margin: 0; } .detail-block .dl--row dd { margin: 0; } .detail-block ol { padding: 0; } .detail-block ol li { margin: 0 0 0 25px; } .detail-block ol li dl { margin: 16px 0 25px; } .detail-block ol li dl dt { margin-bottom: 10px; } .detail-block ol li dl dd { margin: 0; } .detail-block figure { text-align: center; } .detail-block figure img { margin: auto; max-width: 100%; } .detail-block figure.wide { width: 100%; margin: 0; } .detail-block .colored-bg { background-color: rgba(209, 209, 209, 0.3); padding: 1px 10px; margin: 30px 0; } @media screen and (min-width: 960px) { .detail-block .colored-bg { margin: 20px 0; padding: 1px 20px; } } .detail-block .column-2 { display: flex; justify-content: space-around; flex-direction: column; } @media screen and (min-width: 960px) { .detail-block .column-2 { flex-direction: row; } } .detail-block .column-2 .item { width: 100%; } @media screen and (min-width: 960px) { .detail-block .column-2 .item { width: 50%; } } .detail-block h2 { position: relative; font-size: 2.0rem; margin: 30px 0 20px; } .detail-block h2:before { content: ""; width: 100%; height: 2px; background-color: #d1d1d1; position: absolute; bottom: 0; left: 0; } .detail-block h2:after { content: ""; width: 100px; height: 2px; background-color: #b3242b; position: absolute; bottom: 0; left: 0; } @media screen and (min-width: 960px) { .detail-block h2 { font-size: 2.8rem; margin: 60px 0 40px; } } .detail-block .enclose { border: 1px solid #d1d1d1; padding: 10px 30px; margin-top: 60px; } .content-block .detail-block { padding: 0; } .detail-block .thumbnail-table { overflow: auto; } @media screen and (min-width: 960px) { .detail-block .thumbnail-table__thumbnail { float: left; max-width: 35%; margin: 0 20px 0 0; } } @media screen and (min-width: 960px) { .detail-block .thumbnail-table__table { width: auto; margin: 0 0 0 auto; } } .detail-block .thumbnail-table__table td { width: 100%; } .detail-block .google-map { text-align: right; display: block; font-size: 1.3rem; } .detail-block .thumbnail-list > li { margin: 0 0 40px 0; text-align: left; display: flex; flex-direction: column; padding: 0; list-style: none; } .detail-block .thumbnail-list > li:nth-last-child(1) { margin-bottom: 0; } @media screen and (min-width: 960px) { .detail-block .thumbnail-list > li { flex-direction: row; } } @media screen and (min-width: 960px) { .detail-block .thumbnail-list > li figure { margin-right: 40px; margin-top: 0; } } .detail-block .thumbnail-list > li figure img { max-width: 100%; } @media screen and (min-width: 960px) { .detail-block .thumbnail-list > li figure img { max-width: 200px; } } .detail-block .thumbnail-list > li .label { font-size: 1.3rem; } .detail-block .thumbnail-list > li .title { color: #d64d54; font-weight: 700; margin: 0 0 10px 0; } .detail-block .photo-list { display: flex; flex-wrap: wrap; justify-content: space-around; } @media screen and (min-width: 960px) { .detail-block .photo-list { justify-content: flex-start; } } .detail-block .photo-list li { width: 45%; padding: 0; margin: 0 0 20px 0; list-style: none; } @media screen and (min-width: 960px) { .detail-block .photo-list li { width: 20%; } } .detail-block .photo-list li figure { margin: 0; } @media screen and (min-width: 960px) { .detail-block .photo-list li figure { margin: 0 10px; } } .detail-block .photo-list li figure img { width: 100%; } .detail-block .photo-list li figure figcaption { font-size: 1.3rem; text-align: center; margin-top: 8px; } .detail-block .link-list dt:before { content: "\e902"; font-family: "my-fonts" !important; speak: none; font-size: 1.0rem; margin-right: 0.5em; } .detail-block .link-list dt a { color: #333333; } .detail-block .link-list dt a:hover { color: #d64d54; } .detail-block .link-list dd { margin: 0 0 10px 0.85em; } .detail-block .dot-bold dt { font-weight: 600; } .detail-block .dot-bold dt:before { content: "・"; speak: none; font-size: 1.0rem; margin-right: 0.5em; } .detail-block .dot-bold dd { margin: 0 0 30px 2em; } .detail-block .button-box { text-align: center; margin: 0 auto; margin: 40px auto; } @media screen and (min-width: 600px) { .detail-block .button-box { display: flex; justify-content: space-around; } } .detail-block .button-box .bt { color: white; background-color: #b3242b; border: 1px solid inherit; text-decoration: none; padding: 18px 0; white-space: nowrap; display: block; line-height: 1; letter-spacing: 0.1rem; margin: auto; transition: all 0.3s ease; line-height: inherit; padding: 18px 15%; margin: 0 0 30px; } .detail-block .button-box .bt:hover { color: white; background-color: #d64d54; border: 1px solid inherit; } @media screen and (min-width: 600px) { .detail-block .button-box .bt { margin: 0 auto; } } @media screen and (min-width: 960px) { .detail-block .button-box { margin: 100px auto 80px; } } .article-author { margin-top: 65px; margin-top: 6.5rem; margin-bottom: 65px; margin-bottom: 6.5rem; } .article-author__headline { text-align: center; font-size: 0; margin-bottom: 45px; margin-bottom: 4.5rem; } .article-author__headline h1 { font-size: 25px; font-size: 2.5rem; margin-bottom: 15px; margin-bottom: 1.5rem; } .article-author__body { position: relative; margin-top: 60px; margin-top: 6rem; padding: 40px 25px 25px; padding: 4rem 2.5rem 2.5rem; background-color: #ececec; } .article-author__img { position: absolute; top: -40px; top: -4rem; left: 50%; overflow: hidden; width: 80px; width: 8rem; height: 80px; height: 8rem; margin: auto; margin-left: -40px; margin-left: -4rem; text-align: center; border: 1px solid #ececec; border: .1rem solid #ececec; border-radius: 8rem; } .article-author__img img { width: 80px; width: 8rem; } .article-author__detail { font-family: Noto Sans Japanese,Helvetica Neue,Hiragino Kaku Gothic ProN,'游ゴシック','メイリオ',meiryo,sans-serif; font-size: 14px; font-size: 1.4rem; font-weight: 300; line-height: 1.6; letter-spacing: 1px; letter-spacing: .1rem; } .article-author__detail dt { font-size: 15px; font-size: 1.5rem; margin-bottom: 15px; margin-bottom: 1.5rem; } .article-author__detail dd { margin: 0; } @media screen and (max-width: 767px) { .article-author__headline { margin-bottom: 2.5rem; } .article-author__headline h1 { font-size: 1.9rem; margin-bottom: .7rem; } }