@charset 'UTF-8';
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
/* â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â–
å„固定ページ
â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– â– */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
body直下ã«idå「wrapperã€ã®divãŒã‚ã‚Šã¾ã™ã€‚
ã“ã¡ã‚‰ã«ã¯ã€å›ºå®šãƒšãƒ¼ã‚¸ã”ã¨ã«ç•°ãªã‚‹classå(post-〇)ãŒä»˜ä¸Žã•ã‚Œã¾ã™ã®ã§ã€
ã”活用ãã ã•ã„。
ã€ä¾‹ã€‘
<body>
<div id="wrapper" class="post-2 page type-page status-publish has-post-thumbnail hentry">
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ================================================================================
レイアウト
================================================================================ */
/* PCè¨å®š
----------------------------------------------- */
@media (min-width: 768px) {
#wrapper{
}
main.outer_wrap {
position: relative;
max-width: none;
/* max-width: 1920px; 固定幅レイアウト時 */
width: 100%;
min-height: 50vh;
display: block;
padding: 80px 0;
margin: 0 auto;
}
.inner_wrap {
position: relative;
width: 1000px;
margin: 0 auto;
}
}
/* SPè¨å®š
----------------------------------------------- */
@media (max-width: 767px) {
#wrapper {
}
main.outer_wrap {
position: relative;
width: 100%;
min-height: 50vh;
padding: 16vw 0;
}
.inner_wrap {
position: relative;
width: 100%;
padding: 0 4vw;
}
}
/* ================================================================================
メイン画åƒ
================================================================================ */
/* PCè¨å®š
----------------------------------------------- */
@media (min-width: 768px) {
.main_cate {
position: relative;
background: url(../img/main_cate.jpg) center top / cover no-repeat #262626;
width: 100%;
height: 13.2vw;
}
.main_cate_in {
position: relative;
width: 100%;
height: 100%;
display: table;
}
}
/* SPè¨å®š
----------------------------------------------- */
@media (max-width: 767px) {
.main_cate {
position: relative;
background: url(../img/main_cate.jpg) center top / cover no-repeat #262626;
width: 100%;
height: 45vw;
}
.main_cate_in {
position: relative;
width: 100%;
height: 100%;
display: table;
}
}
/* ================================================================================
マージンボックス
================================================================================ */
/* PCè¨å®š
----------------------------------------------- */
@media (min-width: 768px) {
/* 上ã«ãƒžãƒ¼ã‚¸ãƒ³ã‚’空ã‘ã‚‹
----------------------------------------------- */
.top_long {
margin: 120px 0 0 0;
}
.top_middle {
margin: 80px 0 0 0;
}
.top_short {
margin: 40px 0 0 0;
}
/* 下ã«ãƒžãƒ¼ã‚¸ãƒ³ã‚’空ã‘ã‚‹
----------------------------------------------- */
.bottom_long {
margin: 0 0 120px 0;
}
.bottom_middle {
margin: 0 0 80px 0;
}
.bottom_short {
margin: 0 0 40px 0;
}
/* 両方ã«ãƒžãƒ¼ã‚¸ãƒ³ã‚’空ã‘ã‚‹
----------------------------------------------- */
.both_long {
margin: 120px 0;
}
.both_middle {
margin: 80px 0;
}
.both_short {
margin: 40px 0;
}
}
/* SPè¨å®š
----------------------------------------------- */
@media (max-width: 767px) {
/* 上ã«ãƒžãƒ¼ã‚¸ãƒ³ã‚’空ã‘ã‚‹
----------------------------------------------- */
.top_long {
margin: 16vw 0 0 0;
}
.top_middle {
margin: 12vw 0 0 0;
}
.top_short {
margin: 8vw 0 0 0;
}
/* 下ã«ãƒžãƒ¼ã‚¸ãƒ³ã‚’空ã‘ã‚‹
----------------------------------------------- */
.bottom_long {
margin: 0 0 16vw 0;
}
.bottom_middle {
margin: 0 0 12vw 0;
}
.bottom_short {
margin: 0 0 8vw 0;
}
/* 両方ã«ãƒžãƒ¼ã‚¸ãƒ³ã‚’空ã‘ã‚‹
----------------------------------------------- */
.both_long {
margin: 16vw 0;
}
.both_middle {
margin: 12vw 0;
}
.both_short {
margin: 8vw 0;
}
}
/* ================================================================================
見出ã—
================================================================================ */
/* PCè¨å®š
----------------------------------------------- */
@media (min-width: 768px) {
/* h2見出㗠*/
.title_h2 {
margin: 0 0 80px 0;
}
.title_h2 h2 {
display: block;
letter-spacing: 0.05em;
font-size: 30px;
font-weight: 400;
line-height: 1;
text-align: center;
}
.title_h2 h2 span {
display: block;
font-size: 2.5em;
font-family: 'Roboto', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
font-weight: 300;
line-height: 1;
margin: 0 0 0.4em 0;
}
/* h2見出㗠*/
.title_h3 {
margin: 0 0 24px 0 !important;
}
.title_h3 h3 {
color: #171717;
font-size: 18px;
font-weight: 400;
line-height: 1.4 !important;
padding: 1em !important;
border-bottom: solid;
}
}
/* SPè¨å®š
----------------------------------------------- */
@media (max-width: 767px) {
/* h2見出㗠*/
.title_h2 {
margin: 0 0 12vw 0;
}
.title_h2 h2 {
display: block;
letter-spacing: 0.05em;
font-size: 4vw;
font-weight: 400;
line-height: 1;
text-align: center;
}
.title_h2 h2 span {
display: block;
font-size: 2.5em;
font-family: 'Fjalla One', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
font-weight: 300;
line-height: 1;
margin: 0 0 0.4em 0;
}
.title_h2 h2 span.icon_r {
vertical-align: -0.1em !important;
font-size: 0.9em !important;
}
/* h3見出㗠*/
.title_h3 {
margin: 0 0 4vw 0 !important;
}
.title_h3 h3 {
color: #171717;
font-size: 4vw;
font-weight: 400;
line-height: 1.4 !important;
padding: 1em !important;
border-bottom: solid;
}
}
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
ã“ã“ã‹ã‚‰å„固定ページ
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ================================================================================
ãƒãƒ¼ãƒ„åŠ å·¥Â®ã«ã¤ã„ã¦
================================================================================ */
/* PCè¨å®š
----------------------------------------------- */
@media (min-width: 768px) {
.about_flow {
border-bottom: dashed 1px;
padding: 30px 40px 40px 40px;
}
.about_flow h3 {
font-size: 20px;
font-weight: 500;
margin: 0 0 0.5em 0;
}
.about_flow h3 span {
font-size: 1.2em;
font-family: 'Fjalla One', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
font-weight: 300;
margin: 0 0.5em 0 0;
}
.about_flow p {
}
.triangle {
width: 15px;
height: 15px;
border: 5px solid;
border-color: transparent transparent #242424 #242424;
transform: rotate(-45deg);
margin: 20px auto 35px;
}
}
/* SPè¨å®š
----------------------------------------------- */
@media (max-width: 767px) {
.about_flow {
background-color: #ffffff;
padding: 5vw 6vw 6vw 6vw;
}
.about_flow h3 {
font-size: 4vw;
font-weight: 500;
margin: 0 0 0.5em 0;
}
.about_flow h3 span {
font-size: 1.2em;
font-family: 'Fjalla One', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
font-weight: 300;
margin: 0 0.5em 0 0;
}
.about_flow p {
}
.triangle {
width: 20px;
height: 20px;
border: 5px solid;
border-color: transparent transparent #242424 #242424;
transform: rotate(-45deg);
margin: 10px auto 25px;
}
}
/* ================================================================================
カテゴリ別ページ
================================================================================ */
/* PCè¨å®š
----------------------------------------------- */
@media (min-width: 768px) {
.link_category {
}
.link_category ul {
width: 100%;
}
.link_category ul li {
float: left;
width: 25%;
margin: 0 0 40px 0;
}
.link_category ul li a {
display: block;
text-align: center;
font-size: 18px;
color: #242424;
}
.link_category ul li a img {
width: 250px;
height: 250px;
object-fit: cover;
font-family: 'object-fit: cover;'; /* IEå¯¾ç– */
margin: 0 0 8px 0;
}
}
/* SPè¨å®š
----------------------------------------------- */
@media (max-width: 767px) {
.link_category {
}
.link_category ul {
width: 100%;
}
.link_category ul li {
float: left;
width: 50%;
margin: 0 0 6vw 0;
}
.link_category ul li a {
display: block;
text-align: center;
font-size: 3.8vw;
color: #242424;
}
.link_category ul li a img {
width: 100%;
height: 43vw;
object-fit: cover;
font-family: 'object-fit: cover;'; /* IEå¯¾ç– */
margin: 0 0 1vw 0;
}
}