@charset "UTF-8"; /* Scss Document */ /****************************************** [font] ******************************************/ @import url("https://fonts.googleapis.com/css2?family=Parisienne&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Zen+Old+Mincho:wght@500;600&display=swap"); html { font-size: 62.5%; } /****************************************** [color] ******************************************/ /****************************************** [mixin] ******************************************/ /****************************************** [base] ******************************************/ /* 全項共通のパーツを想定 */ body { -webkit-font-smoothing: antialiased; position: relative; overflow-x: hidden; background: #ffffff; color: #4c4545; font-weight: 500; font-size: 1.6rem; line-height: 1.8; font-family: "Zen Kaku Gothic New", "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif; letter-spacing: 0.06em; } body a { color: #4c4545; } img { max-width: 100%; height: auto; border: none; vertical-align: top; vertical-align: bottom; } @media only screen and (max-width: 768px) { main { overflow: hidden; } } /****************************************** [common] ******************************************/ .base_txt01 { font-size: 1.5rem; line-height: 2.2; letter-spacing: 0.1em; } .base_txt02 { font-weight: 500; font-size: 1.8rem; line-height: 2; letter-spacing: 0.12em; } .base_txt03 { line-height: 2.1; letter-spacing: 0.1em; } .txt_white { color: #ffffff; } .txt_white p, .txt_white span, .txt_white a { color: #ffffff; } .lead_txt01 { font-weight: 600; font-size: 2.5rem; line-height: 1.4; font-family: "Zen Old Mincho"; letter-spacing: 0.05em; } .lead_txt02 { font-size: 2rem; line-height: 1.8; letter-spacing: 0.06em; } .lead_txt03 { font-size: 2rem; line-height: 2.5; font-family: "Zen Old Mincho"; letter-spacing: 0.06em; } .lead_txt04 { font-weight: 600; font-size: clamp(2rem, 1.3vw, 2.5rem); line-height: 1.8; font-family: "Zen Old Mincho"; letter-spacing: 0.05em; } .lead_txt04 span { color: #436d15; font-size: clamp(2.2rem, 1.56vw, 3rem); } .lead_txt05 { font-weight: 600; font-size: clamp(2.5rem, 1.56vw, 3rem); line-height: 1.8; font-family: "Zen Old Mincho"; letter-spacing: 0.05em; } .lead_txt05 span { color: #436d15; font-size: clamp(2.2rem, 1.56vw, 3rem); } .lead_txt06 { font-weight: bold; font-size: 2.2rem; line-height: 1.6; font-family: "Zen Old Mincho"; letter-spacing: 0.06em; } .lead_txt_tate01 { font-size: clamp(3.5rem, 2.3vw, 4.5rem); line-height: 1.5; font-family: "Zen Old Mincho"; letter-spacing: 0.06em; writing-mode: vertical-rl; } .lead_txt_tate02 { font-size: clamp(2.8rem, 1.8vw, 3.5rem); line-height: 2; font-family: "Zen Old Mincho"; letter-spacing: 0.06em; writing-mode: vertical-rl; } .lead_txt_tate02 span { text-combine-upright: all; } .center { text-align: center; } .note { padding-left: 1em; font-size: 1.4rem; line-height: 1.5; letter-spacing: 0.06em; text-indent: -1em; } .red { color: #a13c4f; } .greenD2 { color: #436d15; } .beigeL1 { background-color: #f9f6ec !important; } .bg_green { background-color: #70943e !important; } .bg_red { background-color: #a13c4f !important; } .bg_yellowD1 { background-color: #bd8f02 !important; } .bg_blue { background-color: #3b638f !important; } .bg_green_trans { background-color: rgba(112, 148, 62, 0.85); } .bg_red_trans { background-color: rgba(161, 60, 79, 0.85); } .bg_yellowD1_trans { background-color: rgba(189, 143, 2, 0.85); } .bg_blue_trans { background-color: rgba(59, 99, 143, 0.85); } .maker { background: linear-gradient(0deg, #faf4c0 30%, rgba(255, 255, 255, 0) 30%); } .right { text-align: right; } .m_center { margin-right: auto; margin-left: auto; } .m_right { margin-left: auto; } .note { margin-bottom: 5px; padding-left: 1em; font-size: 1.4rem; line-height: 1.4; text-indent: -1em; } .rad10 { border-radius: 10px; } .rad15 { border-radius: 15px; } .rad20 { border-radius: 20px; } .rad30 { border-radius: 30px; } .bold { font-weight: bold; } .bolder { font-weight: 500; } .font17 { font-size: 1.7rem; } .font18 { font-size: 1.8rem; } .font20 { font-size: 2rem; } .txt_space1 { letter-spacing: 0.1em; } .txt_height1 { line-height: 1; } .line { border-bottom: 1px solid #d1cec5; } .line_double { border-bottom: 3px double #4c4545; } .space10 { column-gap: 10px; } .space20 { column-gap: 20px; } .flex_space2 { column-gap: 2%; } .flex_space3 { column-gap: 3%; } .flex_space5 { column-gap: 5%; } .flex_space8 { column-gap: 8%; } .flex_space10 { column-gap: 10%; } .wave_top { position: relative; } .wave_top::before { z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: 60px; background: url(../images/wave_top.webp) center top no-repeat; background-size: auto 60px; content: ""; } .wave_top::after { z-index: -1; position: absolute; bottom: 0; left: 0; width: 100%; height: calc(100% - 60px); background-color: #f9f6ec; content: ""; } .wave_bottom { position: relative; } .wave_bottom::before { z-index: -1; position: absolute; bottom: 0; left: 0; width: 100%; height: 60px; background: url(../images/wave_bottom.webp) center top no-repeat; background-size: auto 60px; content: ""; } .wave_bottom::after { z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 60px); background-color: #f9f6ec; content: ""; } .wave_both { position: relative; background: url(../images/wave_top.webp) center top no-repeat, url(../images/wave_bottom.webp) center bottom no-repeat; background-size: auto 60px, auto 60px; } .wave_both::before { z-index: -1; position: absolute; top: 60px; left: 0; width: 100%; height: calc(100% - 120px); background-color: #f9f6ec; content: ""; } .garally_li { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 60px 4%; } .garally_li li { width: 30%; } [class*=_map] iframe { filter: saturate(0.6); } .deco_flower01 { z-index: -1; position: absolute; top: -10%; left: -3%; width: 10vw; min-width: 120px; } .deco_flower02 { z-index: -1; position: absolute; right: -1%; bottom: 3%; width: 5.7vw; min-width: 100px; } @media only screen and (max-width: 1280px) { .txt_left1280 { text-align: left; } } @media only screen and (max-width: 1000px) { .base_txt01 { font-size: 1.7rem; } .lead_txt01 { font-size: 2rem; } .lead_txt02 { font-size: 1.7rem; } .lead_txt03 { font-size: 1.7rem; line-height: 2.2; } .lead_txt_tate01 { font-size: 3rem; } .wave_top::before, .wave_bottom::before { height: 30px; background-size: auto 30px; } .wave_top::after, .wave_bottom::after { height: calc(100% - 30px); } .wave_both { background-size: auto 30px, auto 30px; } .wave_both::before { top: 30px; height: calc(100% - 60px); } .garally_li { gap: 50px 5%; } .garally_li li { width: 47.5%; } } @media only screen and (max-width: 768px) { .lead_txt05 { line-height: 1.5; } .lead_txt_tate02 span { font-size: 3.2rem; letter-spacing: normal; } .sp_center { text-align: center; } .sp_m_center { margin-right: auto; margin-left: auto; } .rad10 { border-radius: 6px; } .rad15 { border-radius: 10px; } .rad20 { border-radius: 10px; } .rad30 { border-radius: 20px; } .deco_flower01 { top: -60px; left: -10%; } .deco_flower02 { right: -10%; } } @media only screen and (max-width: 480px) { body { font-size: 1.5rem; } .lead_txt04 { font-size: 1.7rem; } .lead_txt04 span { font-size: 1.8rem; } .lead_txt_tate01 { font-size: 2.8rem; } .font20 { font-size: 1.8rem; } .sp_left { text-align: left; } .wave_top::before, .wave_bottom::before { height: 15px; background-size: auto 15px; } .wave_top::after, .wave_bottom::after { height: calc(100% - 15px); } .wave_both { background-size: auto 15px, auto 15px; } .wave_both::before { top: 15px; height: calc(100% - 30px); } .garally_li { width: 90%; margin-right: auto; margin-left: auto; gap: 40px 0; } .garally_li li { width: 100%; } .deco_flower01 { min-width: 90px; } .deco_flower02 { min-width: 70px; } } /****************************************** [btn] ******************************************/ .btn01 { width: fit-content; } .btn01 a { display: flex; justify-content: flex-start; column-gap: 15px; align-items: center; font-size: clamp(1.8rem, 1vw, 2rem); line-height: 1; letter-spacing: 0.06em; transition: 0.4s; } .btn01 a span { position: relative; width: 40px; height: 40px; border-radius: 50%; background-color: #666060; line-height: 40px; transition: 0.4s; } .btn01 a i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #ffffff; font-size: 1.4rem; } .btn01 a:hover span { background-color: #4c4545; } .btn01 a:hover i { animation-duration: 0.6s; animation-iteration-count: 1; animation-fill-mode: forwards; animation-name: arrowAnime; } @keyframes arrowAnime { 0% { left: 50%; opacity: 1; } 40% { left: 80%; opacity: 0; } 60% { left: 0%; opacity: 0; } 100% { left: 50%; opacity: 1; } } .btn02 { width: 480px; } .btn02 a { display: block; position: relative; padding: 15px 40px 15px 10px; border-radius: 10px; background: linear-gradient(to bottom, #70943e, #577929); box-shadow: 0 0 15px 0 rgba(38, 39, 39, 0.3); color: #ffffff; font-size: 2.5rem; letter-spacing: 0.06em; text-align: center; transition: 0.4s; } .btn02 a::after { display: block; content: "\e900"; font-family: "icomoon"; position: absolute; top: 50%; transform: translateY(-50%); right: 20px; width: 24px; height: 24px; border-radius: 50%; background-color: #ffffff; color: #70943e; font-size: 1.2rem; line-height: 24px; } .btn02 a:hover { transform: scale(0.99); background: linear-gradient(to bottom, #7ea646, #658c2f); box-shadow: none; } .btn03 { width: clamp(440px, 31vw, 600px); } .btn03 a { display: block; position: relative; padding: 20px 40px 20px 10px; border: 2px solid #ffffff; border-radius: 10px; background: linear-gradient(to bottom, #febe25, #c88d00); box-shadow: 0 0 15px 0 rgba(38, 39, 39, 0.3); color: #ffffff; font-weight: bold; font-size: clamp(2rem, 1.45vw, 2.8rem); letter-spacing: 0.03em; text-align: center; transition: 0.4s; } .btn03 a span { font-size: clamp(1.8rem, 1.14vw, 2.2rem); } .btn03 a::after { display: block; content: "\e900"; font-family: "icomoon"; position: absolute; top: 50%; transform: translateY(-50%); right: 20px; width: 24px; height: 24px; border-radius: 50%; background-color: #ffffff; color: #bd8f02; font-size: 1.2rem; line-height: 24px; } .btn03 a:hover { transform: scale(0.99); background: linear-gradient(to bottom, #fec63e, #e29f00); box-shadow: none; } .btn04 { width: 84%; } .btn04 a { position: relative; display: flex; justify-content: center; column-gap: 10px; align-items: center; padding: 22px 10px; border: 2px solid #ffffff; border-radius: 10px; background: linear-gradient(to bottom, #a13c4f, #8f293c); box-shadow: 0 0 10px 0 rgba(38, 39, 39, 0.2); color: #ffffff; line-height: 1.3; line-height: 1; text-align: center; transition: 0.4s; } .btn04 a p { padding-right: 12px; border-right: 1px solid rgba(255, 255, 255, 0.5); font-size: 2.5rem; letter-spacing: 0.06em; } .btn04 a span { margin-left: 5px; font-size: 1.7rem; } .btn04 a i { width: 25px; } .btn04 a:hover { transform: scale(0.99); background: linear-gradient(to bottom, #b44358, #a32f44); box-shadow: none; } @media only screen and (max-width: 768px) { .btn01 a { column-gap: 10px; font-size: 1.7rem; } .btn01 a span { width: 34px; height: 34px; line-height: 34px; } .btn01 a i { font-size: 1.3rem; } .btn02 { width: 360px; } .btn02 a { padding: 15px 40px 15px 10px; font-size: 2rem; } } @media only screen and (max-width: 480px) { .btn03 { width: 100%; } .btn03 a { font-size: 2.2rem; } .btn03 a::after { right: 12px; width: 20px; height: 20px; font-size: 1.1rem; line-height: 20px; } } /****************************************** [table] ******************************************/ .table01 { width: 100%; background-color: #ffffff; line-height: 1.6; } .table01 tr { border-bottom: 1px solid #b5b5b5; } .table01 th { padding: 18px 5px 18px 15px; font-weight: bold; } .table01 td { vertical-align: bottom; width: 120px; } .table01 td:first-of-type { min-width: 6em; padding: 18px 5px; text-align: center; } .table01 td:last-of-type { min-width: 5.2em; padding: 18px 10px 18px 5px; text-align: right; } .table_dot_li { font-size: 1.4rem; } .table_dot_li02 { display: flex; justify-content: flex-start; column-gap: 10px; flex-wrap: wrap; font-size: 1.4rem; } .table02 { width: 100%; border-collapse: separate; border-spacing: 15px 0; } .table02 th { position: relative; width: 250px; padding: 30px 10px; border-bottom: 1px solid #70943e; font-weight: bold; vertical-align: top; } .table02 td { padding: 30px 10px 30px 20px; border-bottom: 1px solid #b5b5b5; } .table03 { width: 100%; border-top: 1px solid #d1cec5; } .table03 tr { border-bottom: 1px solid #d1cec5; } .table03 th { min-width: 9em; padding: 18px 25px 18px 0; font-weight: bold; vertical-align: top; } .table03 td { padding: 18px 0; } .wpcf7-list-item { margin-left: 0 !important; } .radio_block .wpcf7-list-item { display: block; } @media only screen and (max-width: 1200px) { .table03 th { padding: 15px 20px 15px 0; } .table03 td { padding: 15px 0; } } @media only screen and (max-width: 768px) { .memoria02_white .table01:nth-child(1) { border-bottom: 1px solid #b5b5b5; } .table01 { font-size: 1.5rem; } .table01 tr { border-bottom: 1px solid #b5b5b5; } .table01 th { padding: 18px 0 18px 10px; } .table01 td { width: 95px; } .table01 td:first-of-type { min-width: 5em; padding: 18px 0; } .table01 td:last-of-type { min-width: 5.2em; padding: 18px 10px 18px 0; } .table_dot_li, .table_dot_li02 { font-size: 1.3rem; } .table02 { border-spacing: 0; } .table02 th { display: block; width: 100%; padding: 20px 0 5px; border-bottom: none; color: #436d15; } .table02 td { display: block; width: 100%; padding: 0 0 20px; } } /****************************************** [h-tag] ******************************************/ h1 { z-index: 1200; position: absolute; top: 20px; left: 50px; width: 154px; } h2:not(.tag_title) { text-align: center; } h2:not(.tag_title) p { font-weight: 600; font-size: clamp(4rem, 3.1vw, 6rem); line-height: 1.3; font-family: "Zen Old Mincho"; letter-spacing: 0.06em; } h2:not(.tag_title) span { display: block; height: 76px; margin-bottom: 20px; background: url(../images/logo_mark.svg) center center no-repeat; background-size: 90px auto; font-size: clamp(2.2rem, 1.56vw, 3rem); line-height: 76px; font-family: "Parisienne"; } .h2_under p { font-size: clamp(3.5rem, 2.6vw, 5rem); } h3 { font-weight: 600; font-size: clamp(3rem, 1.8vw, 3.5rem); line-height: 1.4; font-family: "Zen Old Mincho"; letter-spacing: 0.06em; } h4 { padding: 2px 0; background-color: #666060; } h4 p { padding: 8px 30px 10px; border-top: 1px solid #a9a59a; border-bottom: 1px solid #a9a59a; color: #ffffff; font-size: 3rem; line-height: 1.4; font-family: "Zen Old Mincho"; letter-spacing: 0.06em; } h5 { padding: 18px 15px; border-radius: 15px 15px 0 0; background-color: #577929; color: #ffffff; font-size: 2rem; line-height: 1.5; font-family: "Zen Old Mincho"; letter-spacing: 0.1em; } @media only screen and (max-width: 1440px) { h1 { top: 15px; left: 30px; width: 100px; } } @media only screen and (max-width: 768px) { h1 { top: 8px; left: 15px; width: 70px; } h2:not(.tag_title) p { font-size: 3.2rem; } h2:not(.tag_title) span { height: 60px; margin-bottom: 15px; background-size: 70px auto; font-size: 1.8rem; line-height: 60px; } .h2_under p { font-size: 3rem; } h4 p { padding: 8px 20px; font-size: 2.2rem; } } /****************************************** [mv pagettl] ******************************************/ #mv { z-index: 1000; position: relative; } .main_pic img { width: 100%; min-height: 370px; object-fit: cover; } #pagettl { z-index: 900; position: relative; } #pagettl img { width: 100%; min-height: 270px; object-fit: cover; } .pagettl_txt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; color: #ffffff; font-size: 5rem; line-height: 1; font-family: "Zen Old Mincho"; letter-spacing: 0.06em; text-align: center; } .pagettl_txt span { display: block; margin-top: 20px; font-size: 2rem; font-family: "Parisienne"; letter-spacing: 0.06em; } .side_bnr { z-index: 1200; position: fixed; top: 230px; right: 0; } .side_bnr a { display: block; filter: drop-shadow(0 0 10px rgba(38, 39, 39, 0.2)); } @media only screen and (max-width: 768px) { .pagettl_txt { font-size: 3.5rem; } .pagettl_txt span { margin-top: 15px; font-size: 1.8rem; } .pagettl_company img { object-position: top 50% left 15%; } .side_bnr { display: none; } } @media only screen and (max-width: 480px) { #pagettl img { min-height: 240px; } } /****************************************** [headder] ******************************************/ .header_area { position: relative; background-color: #ffffff; display: flex; justify-content: space-between; column-gap: 1.5vw; align-items: center; width: 100%; height: 100px; } .header_tel { display: flex; justify-content: flex-start; line-height: 1; } .header_tel i { display: block; margin-top: 12px; margin-right: 10px; color: #436d15; font-size: 2.5rem; } .header_tel p { text-align: center; } .header_tel span { display: block; margin-bottom: 5px; font-weight: bold; font-size: clamp(3.8rem, 2.2vw, 4.2rem); letter-spacing: normal; } .header_contact { width: 7.2vw; min-width: 100px; height: 100%; } .header_contact a { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; height: 100%; background-color: #bd8f02; color: #ffffff; font-size: 1.8rem; line-height: 1; letter-spacing: 0.1em; text-align: center; transition: 0.4s; } .header_contact a p { display: block; width: 100%; font-size: 1.8rem; } .header_contact a i { display: block; margin-bottom: 10px; font-size: 2rem; } .header_contact a:hover { background-color: #af7b00; } .fixed { z-index: 100000; position: fixed; top: 0; left: 0; width: 100%; } @media only screen and (max-width: 1440px) { .header_tel i { margin-top: 7px; margin-right: 5px; font-size: 2rem; } .header_tel p { font-size: 1.4rem; } .header_tel span { font-size: 3rem; } .header_contact { min-width: 80px; } .header_contact a p { font-size: 1.6rem; } } @media only screen and (max-width: 1300px) { .header_area { height: 70px; } .header_tel, .header_contact { display: none; } } /****************************************** [nav] ******************************************/ nav { display: flex; align-items: center; width: clamp(820px, 54.6vw, 1050px); min-width: 820px; height: 100%; margin-left: auto; } nav > ul { display: flex; justify-content: space-between; column-gap: 10px; width: 100%; height: 100%; } nav > ul > li { position: relative; } nav > ul > li > a { display: flex; align-items: center; height: 100%; font-size: clamp(1.4rem, 0.8vw, 1.6rem); line-height: 1; transition: 0.2s; } nav > ul > li > a:hover { color: #70943e; } nav > ul > li:nth-child(-n+3) > a::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; width: 10px; height: 10px; border-radius: 10px; background-color: #70943e; color: #70943e; opacity: 0; transition: 0.4s; } nav > ul li:hover ul { visibility: visible; opacity: 1; } nav > ul > li:nth-child(-n+3):hover > a::after { bottom: 10px; opacity: 1; } .pull-down { visibility: hidden; z-index: 99990; position: absolute; top: 85%; left: 0; width: 260px; margin: 0; opacity: 0; transition: 0.5s; } .pull-down li a { display: block; padding: 12px 20px; background-color: #70943e; color: #ffffff; transition: 0.4s; } .pull-down li a:hover { background-color: #628236; } .pull-down li:not(:last-child) a { border-bottom: 1px solid rgba(255, 255, 255, 0.5); } @media only screen and (max-width: 1300px) { nav { display: none; } } /****************************************** [breadcrumb] ******************************************/ #breadcrumb { padding: 15px 30px; } #breadcrumb ul { display: flex; justify-content: flex-end; column-gap: 1em; font-size: 1.4rem; } #breadcrumb ul li:not(:last-child)::after { margin-left: 1em; content: "〉"; color: #a9a59a; } #breadcrumb ul a:hover { color: #577929; } @media only screen and (max-width: 768px) { #breadcrumb { padding: 15px 20px; } #breadcrumb ul { column-gap: 0.5em; font-size: 1.2rem; } #breadcrumb ul li:not(:last-child)::after { margin-left: 0.8em; } } /****************************************** [info_fixed] ******************************************/ #info_fixed { z-index: 1300; position: fixed; bottom: 0; left: 0; width: 100%; background: url(../images/bg_green.webp); box-shadow: 0 0 10px 0 rgba(38, 39, 39, 0.25); display: flex; justify-content: center; column-gap: 30px; align-items: center; } #info_fixed a { color: #ffffff; } #info_fixed .btn03 { width: clamp(340px, 24vw, 460px); } #info_fixed .btn03 a { padding: 15px 35px 15px 10px; font-size: clamp(1.5rem, 1vw, 2rem); } #info_fixed .btn03 a span { font-size: clamp(1.5rem, 1vw, 2rem); } #info_fixed .btn03 a i { letter-spacing: 0.2em; } #info_fixed .btn03 a::after { right: 12px; width: 20px; height: 20px; font-size: 1rem; line-height: 20px; text-align: center; } .info_fixed_txt { position: relative; padding: 15px; border-radius: 10px; background-color: #ffffff; color: #436d15; font-weight: bold; line-height: 1.3; letter-spacing: 0.03em; } .info_fixed_txt::before { padding: 10px; background-color: #ffffff; content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: -10px; clip-path: polygon(0 45%, 100% 100%, 100% 0); } .info_fixed_tel { display: flex; justify-content: flex-start; color: #ffffff; line-height: 1; } .info_fixed_tel i { display: block; margin-top: 0.4em; margin-right: 12px; font-size: clamp(2rem, 1.56vw, 3rem); } .info_fixed_tel p { text-align: center; } .info_fixed_tel span { display: block; margin-bottom: 5px; font-weight: bold; font-size: clamp(3.2rem, 2.7vw, 5.2rem); letter-spacing: normal; } @media only screen and (max-width: 1100px) { #info_fixed { column-gap: 15px; padding-right: 10px; padding-left: 10px; } .info_fixed_txt { font-size: 1.5rem; } } @media only screen and (max-width: 940px) { #info_fixed { column-gap: 15px; padding: 10px; } #info_fixed figure { display: none; } .info_fixed_txt { display: none; } } @media only screen and (max-width: 480px) { #info_fixed .btn03 { width: 230px; min-width: 230px; } #info_fixed .btn03 a { padding: 5px 12px 7px; font-size: 2rem; line-height: 1.2; text-align: left; } #info_fixed .btn03 a span { font-size: 2rem; } #info_fixed .btn03 a i:last-of-type { display: none; } #info_fixed .btn03 a::after { right: 8px; } .info_fixed_tel i { margin-top: 0.6em; margin-right: 7px; font-size: 1.8rem; } .info_fixed_tel p { font-size: 1.6rem; } .info_fixed_tel span { font-size: 3.2rem; } } /****************************************** [footer] ******************************************/ .footer_nav { width: 460px; min-width: 415px; display: flex; justify-content: space-between; column-gap: 30px; margin-left: auto; } .footer_nav ul { width: 50%; } .footer_nav ul li a { display: block; margin-bottom: 25px; font-size: 1.5rem; line-height: 1; transition: 0.4s; } .footer_nav ul li a::before { margin-right: 0.5em; content: "-"; color: #70943e; } .footer_nav ul li a:hover { color: #70943e; } #copyright { font-size: 1.2rem; text-align: right; } @media only screen and (max-width: 1000px) { footer .flex_start { flex-wrap: wrap; justify-content: center; gap: 40px 5%; } .footer_logo { width: 120px; } .footer_ad { width: calc(100% - 120px); } .footer_nav { margin-left: 0; } } @media only screen and (max-width: 768px) { .footer_logo { margin: 0 auto 30px; } .footer_ad { width: fit-content; margin: 0 auto 40px; text-align: center; } .footer_nav { width: fit-content; min-width: auto; margin-right: auto; margin-left: auto; } .footer_nav ul { width: auto; } .footer_nav ul li a { margin-bottom: 20px; font-size: 1.5rem; } #copyright { text-align: center; } } /****************************************** [top] ******************************************/ #cont01 h3 { font-size: clamp(3rem, 2.3vw, 4.5rem); } .cont01_li { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px 60px; } .cont01_li li { width: calc(50% - 30px); display: flex; justify-content: flex-start; column-gap: 35px; align-items: center; } .cont01_li li i { display: block; width: 160px; } .cont01_li li div { width: calc(100% - 160px); } .cont02_li { display: grid; grid-template-columns: repeat(auto-fit, minmax(370px, 1fr)); gap: 100px 4vw; } .cont02_li li { display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: 0 0; } .cont02_li p:first-of-type { align-self: center; margin-top: 20px; color: #577929; font-size: clamp(2.2rem, 1.3vw, 2.5rem); line-height: 1.3; font-family: "Zen Old Mincho"; letter-spacing: 0.06em; text-align: center; } .cont02_pic { position: relative; border: 1px solid #70943e; border-radius: 15px; } .cont02_pic > img { border: 5px solid #ffffff; border-radius: 15px; } .cont02_num { width: clamp(70px, 4vw, 80px); position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(-32px, -2.1vw, -40px); } #cont03 { background: url(../images/bg_sky.webp) top center no-repeat; background-size: 100% auto; background-color: #f2f6f9; } #cont03 .memoria_txt_area { width: 100%; padding: 30px 40px 50px; } .plan_flex { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 80px 10px; } .plan_area { width: 47.5%; border-radius: 30px 30px 0 0; background-color: #ffffff; box-shadow: 0 0 30px 0 rgba(59, 99, 143, 0.3); } .plan_ttl { padding: 30px 20px; border-radius: 30px 30px 0 0; background-color: #70943e; color: #ffffff; font-size: clamp(4.5rem, 3.1vw, 6rem); line-height: 1; font-family: "Zen Old Mincho"; letter-spacing: 0.06em; text-align: center; } .plan_ttl span { display: block; margin-bottom: 10px; font-size: 2.2rem; letter-spacing: 0.06em; } .plan_price { display: flex; justify-content: flex-start; align-items: flex-end; width: fit-content; margin-right: auto; margin-left: auto; } .plan_price_large { margin-right: 15px; color: #8f293c; font-weight: 600; font-size: clamp(6rem, 5.2vw, 10rem); line-height: 1; font-family: "Zen Old Mincho"; letter-spacing: -0.02em; } .plan_price_large span { position: relative; font-size: clamp(3.5rem, 2.8vw, 5.5rem); } .plan_price_large span span { position: absolute; top: -5px; left: 0; width: 3em; font-size: 1.6rem; } .plan_price_small { font-weight: 600; font-size: clamp(3rem, 2.5vw, 4.8rem); line-height: 1; font-family: "Zen Old Mincho"; letter-spacing: -0.02em; } .plan_price_small span { position: relative; font-size: clamp(2.2rem, 1.56vw, 3rem); } .plan_price_small span span { position: absolute; top: -5px; left: -3px; width: 3em; font-size: 1.1rem; } .plan_item { display: flex; justify-content: space-between; align-items: center; padding: 10px 10px 10px 25px; background-color: #f9f6ec; } .plan_item.jus_center { justify-content: center; } .plan_item_people { font-size: clamp(1.8rem, 1vw, 2rem); line-height: 1; } .plan_item_people i { margin-right: 15px; color: #a9a59a; font-size: 2.2rem; } .plan_item_people span { font-size: clamp(2.5rem, 1.56vw, 3rem); } .plan_item_li { display: flex; justify-content: center; column-gap: 5px; width: fiti-content; margin: 0 auto; } .plan_item_li li { width: clamp(80px, 6.2vw, 120px); padding: 8px 10px; border-radius: 5px; background-color: #4c4545; color: #ffffff; font-size: clamp(1.6rem, 1vw, 2rem); line-height: 1; text-align: center; } .plan_item_li .gray_d1cec5 { background-color: #d1cec5; } #cont04 .flex_box02 { flex-wrap: wrap; gap: 70px 4%; } .cont04_area { width: 48%; } .cont04_ttl { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 3px double #a9a59a; color: #436d15; font-size: clamp(2rem, 1.3vw, 2.5rem); line-height: 1.5; } #cont05 { z-index: 1; position: relative; } .cont05_area { z-index: 2; position: relative; padding-top: 100px; background: url(../images/cont05_bg.webp) top right no-repeat; background-size: 62% auto; } .cont05_txt_area { width: clamp(800px, 56vw, 1080px); padding: 70px; background-color: #ffffff; display: flex; justify-content: flex-start; z-index: 3; position: relative; column-gap: 60px; align-items: center; } .cont05_txt_area::before { position: absolute; top: 25px; left: -20px; width: 100px; height: 3px; transform: rotate(-45deg); border-bottom: 3px double #666060; content: ""; } .cont05_li li { display: flex; justify-content: flex-start; column-gap: 20px; } .cont05_li li > div { width: calc(100% - 80px); } .cont05_li li:not(:last-child) { margin-bottom: 35px; } .cont05_num { min-width: 80px; } .cont05_ttl { margin-top: 12px; color: #436d15; font-size: 3rem; line-height: 1.5; font-family: "Zen Old Mincho"; } .cont05_txt { margin-left: 95px; } .cont05_flower01 { z-index: 10; position: absolute; top: -30px; left: -40px; } .cont05_flower02 { z-index: 11; position: absolute; top: 39vw; right: 2.6vw; width: 170px; } .cont05_flower03 { z-index: 12; position: absolute; top: 45vw; right: 14vw; } .top_voice_li { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 130px 4vw; } .top_voice_li li { display: grid; position: relative; grid-template-rows: subgrid; grid-row: span 3; padding: 30px 35px 10px; gap: 0 0; border-radius: 15px; background-color: #edf1e9; } .top_voice_li li p:nth-of-type(2) { margin-top: 20px; padding-top: 20px; border-top: 1px solid #436d15; } .top_voice_ttl { align-self: center; color: #436d15; font-size: 2rem; line-height: 1.5; } .top_voice_name { font-size: 1.8rem; text-align: right; } .top_voice_illust { position: absolute; bottom: -60px; left: 15px; } /*アコーディオン全体*/ .accordion-area li { margin-bottom: 20px; padding-bottom: 1px; overflow: hidden; border-radius: 15px; background-color: #edf1e9; } .aco_ttl { position: relative; padding: 30px 50px 30px 100px; border-radius: 15px; color: #577929; font-size: clamp(2rem, 1.25vw, 2.4rem); line-height: 1.4; font-family: "Zen Old Mincho"; letter-spacing: 0.06em; cursor: pointer; transition: all 0.5s ease; } .aco_ttl::before { position: absolute; top: 20px; left: 25px; width: 54px; height: 54px; border-radius: 50%; background-color: #70943e; content: "Q"; color: #ffffff; font-size: 2.4rem; line-height: 50px; font-family: "Zen Old Mincho"; text-align: center; } .aco_ttl::after { position: absolute; top: 35px; right: 30px; transform: rotate(0deg); content: "\e902"; font-size: 2rem; font-family: "icomoon"; transition: 0.3s; } .aco_ttl.close::after { transform: rotate(180deg); } .box { display: none; padding: 0 30px 30px; background-color: #edf1e9; } .box p { padding: 40px; border-radius: 10px; background-color: #ffffff; } @media only screen and (max-width: 1400px) { .cont05_txt_area { display: block; width: 68%; padding: 40px; } .cont05_txt_area .lead_txt_tate01 { margin-bottom: 30px; text-align: center; writing-mode: horizontal-tb; } .cont05_li li { column-gap: 10px; } .cont05_num { width: 70px; min-width: 60px; } .cont05_ttl { margin-top: 8px; font-size: 2.5rem; } } @media only screen and (max-width: 1300px) { .cont01_li { gap: 30px 60px; } .cont01_li li { column-gap: 20px; align-items: flex-start; } .cont01_li li i { display: block; width: 110px; } .cont01_li li div { width: calc(100% - 110px); } #cont03 .memoria_txt_area { padding: 30px 20px 40px; } .plan_area { width: 48.8%; } } @media only screen and (max-width: 1100px) { .plan_flex { flex-wrap: wrap; gap: 60px 10px; } .plan_area { width: 100%; max-width: 800px; margin-right: auto; margin-left: auto; } } @media only screen and (max-width: 1000px) { .cont04_area { width: 100%; } .cont05_area { z-index: 2; position: relative; padding-top: 40%; background-position: top -100px right; background-size: 100% auto; } .cont05_txt_area { width: 100%; padding: 40px 30px; } .cont05_flower01 { width: 140px; } .cont05_flower02 { top: auto; right: -40px; bottom: -30px; width: 140px; } .cont05_flower03 { top: auto; right: 130px; bottom: -60px; width: 90px; } } @media only screen and (max-width: 768px) { .cont01_li li { width: 100%; } .cont01_li li i { display: block; width: 90px; } .cont01_li li div { width: calc(100% - 90px); } .cont02_li { grid-template-columns: 100%; gap: 50px 0; } .cont02_li li { gap: 20px 0; } #cont03 { background-size: 150% auto; } #cont03 .memoria_txt_area { padding: 20px 20px 35px; } .plan_flex { gap: 40px 0; } .plan_area { box-shadow: 0 0 20px 0 rgba(59, 99, 143, 0.3); } .plan_ttl { padding: 22px 10px; border-radius: 15px 15px 0 0; font-size: 3.5rem; } .plan_ttl span { font-size: 1.6rem; } .plan_price_large { font-size: 5.2rem; } .plan_price_large span { margin-left: 3px; } .plan_price_large span span { top: -3px; font-size: 1.2rem; } .plan_item { padding: 10px 10px 10px 15px; } .plan_item_people { font-size: 1.6rem; } .plan_item_people i { margin-right: 5px; font-size: 1.6rem; } .plan_item_people span { font-size: 2rem; } .plan_item_li li { width: 75px; padding: 5px; font-size: 1.5rem; } .accordion-area li { margin-bottom: 20px; padding-bottom: 1px; overflow: hidden; border-radius: 10px; background-color: #edf1e9; } .aco_ttl { position: relative; padding: 18px 50px 18px 65px; border-radius: 10px; color: #577929; font-size: 1.8rem; line-height: 1.4; font-family: "Zen Old Mincho"; letter-spacing: 0.06em; cursor: pointer; transition: all 0.5s ease; } .aco_ttl::before { position: absolute; top: 50%; transform: translateY(-50%); left: 15px; width: 34px; height: 34px; font-size: 1.8rem; line-height: 32px; } .aco_ttl::after { top: 35%; right: 15px; transform: rotate(0deg); font-size: 1.8rem; transition: 0.3s; } .box { padding: 0 15px 15px; } .box p { padding: 15px; border-radius: 10px; } } @media only screen and (max-width: 480px) { .cont04_area .flex_45 { width: 90%; margin-right: auto; margin-left: auto; } .cont04_area .btn01 { margin-left: auto; } .cont05_area { padding-top: 55%; background-position: top -80px right; background-size: 130% auto; } .cont05_num { margin-right: auto; margin-left: auto; } .cont05_ttl { font-size: 2.2rem; text-align: center; } .cont05_li li { display: block; } .cont05_li li div { width: 100%; } .cont05_flower01 { top: -20px; left: -30px; width: 100px; } .cont05_flower02 { right: -30px; width: 100px; } .cont05_flower03 { right: 100px; bottom: -40px; width: 60px; } .top_voice_li { gap: 90px 0; } .top_voice_illust { bottom: -50px; width: 130px; } } /****************************************** [info] ******************************************/ #info, #hurry_info { z-index: 8; position: relative; overflow: hidden; background: url(../images/bg_green.webp); } #info::before, #hurry_info::before { z-index: -1; position: absolute; bottom: 0; left: 0; width: 50%; height: 100%; background: url(../images/info_bg_left.webp) bottom no-repeat; background-size: 100% auto; content: ""; mix-blend-mode: color-burn; } #info::after, #hurry_info::after { z-index: -1; position: absolute; right: 0; bottom: 0; width: 50%; height: 100%; background: url(../images/info_bg_right.webp) bottom no-repeat; background-size: 100% auto; content: ""; mix-blend-mode: color-burn; } .info_ttl { position: relative; width: fit-content; font-weight: 600; font-size: clamp(3rem, 2.6vw, 5rem); line-height: 1.3; font-family: "Zen Old Mincho"; letter-spacing: 0.06em; text-align: center; } .info_ttl::before { position: absolute; bottom: 0; left: -1.2em; width: 2px; height: 90%; transform: rotate(-20deg); background-color: #ffffff; content: ""; } .info_ttl::after { position: absolute; right: -1.2em; bottom: 0; width: 2px; height: 90%; transform: rotate(20deg); background-color: #ffffff; content: ""; } .info_inner { z-index: 1; position: relative; padding: 50px 20px 40px; background-color: #ffffff; } .info_inner::before { display: block; z-index: -1; position: absolute; top: 5px; left: 5px; width: calc(100% - 10px); height: calc(100% - 10px); border: 1px solid #70943e; content: ""; } .info_tel { display: flex; justify-content: flex-start; line-height: 1; } .info_tel i { display: block; margin-top: 0.5em; margin-right: 15px; color: #436d15; font-size: clamp(3rem, 2.5vw, 4.8rem); } .info_tel p { font-size: clamp(1.6rem, 1.2vw, 2.4rem); text-align: center; } .info_tel span { display: block; margin-bottom: 8px; font-weight: bold; font-size: clamp(5rem, 4.16vw, 8rem); letter-spacing: normal; } .info_present { width: fit-content; display: flex; justify-content: center; z-index: 3; position: relative; column-gap: 30px; align-items: center; margin-right: auto; margin-left: auto; } .info_present::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); z-index: -1; right: 0; width: 70%; height: 60%; background-color: #f9f6ec; } .info_present p { padding-right: 40px; font-size: clamp(2rem, 1.2vw, 2.4rem); line-height: 1.5; } .info_person { z-index: 8; position: absolute; right: -20px; bottom: 0; width: 22vw; min-width: 260px; } @media only screen and (max-width: 1000px) { #info h3 { font-size: 2.5rem; } #info .btn03 { margin-right: auto; margin-left: auto; } .info_inner { padding: 50px 20px; } .info_tel { width: fit-content; margin: 0 auto 25px; } .info_present { column-gap: 20px; } .info_present figure { width: 200px; } .info_present p { padding-right: 20px; font-size: 1.6rem; } } @media only screen and (max-width: 768px) { #info h3 { font-size: 1.8rem; } .info_inner { padding: 40px 25px; } .info_person { min-width: 180px; } .info_present { column-gap: 10px; } .info_present::after { height: 100%; } .info_present figure { width: 150px; } .info_present p { padding-right: 20px; font-size: 1.5rem; line-height: 1.3; letter-spacing: normal; } .info_person { right: -20px; } } @media only screen and (max-width: 480px) { #info::before { width: 100%; } #info::after { bottom: 45%; width: 100%; } #info .lead_txt02 { font-size: 1.6rem; } #info .btn03 a span { display: none; } .info_ttl { font-size: 2.2rem; letter-spacing: 0.03em; } .info_ttl::before { left: -1em; } .info_ttl::after { right: -1em; } .info_present { margin-left: 5px; } } /****************************************** [news] ******************************************/ #topics, #news { background-color: #f9f6ec; } .topics_flower01 { position: absolute; top: -50px; left: -30px; width: 8vw; min-width: 120px; } .topics_flower02 { position: absolute; right: 20px; top: calc(50% - 60px); transform: translateY(-50%); width: 5.7vw; min-width: 70px; } .topics_li li a { display: flex; justify-content: flex-start; column-gap: 40px; padding: 22px 20px 22px 30px; border: 2px solid #ffffff; border-radius: 6px; background-color: #ffffff; line-height: 1.6; transition: 0.5s; } .topics_li li a:hover { border: 2px solid #d7d1b7; } .topics_li li:not(:last-child) { margin-bottom: 8px; } .topics_date { color: #70943e; } .topics_ttl { font-size: 1.6rem; line-height: 1.5; letter-spacing: 0.08em; } .pagenation ul{ display: flex; justify-content: space-between; column-gap: 30px; justify-content: center; } .pagenation li { font-size: 1.8rem; line-height: 2; } .pagenation li a { display: block; padding: 0 3px; color: #3b3030; transition: 0.4s; } .pagenation li a:hover { border-bottom: 1px solid #70943e; color: #70943e; } .active { padding: 0 3px; border-bottom: 1px solid #70943e; color: #3b3030; color: #70943e; } .prev a, .next a { display: block; margin-top: 5px; font-size: 1.5rem; transition: 0.4s; } .prev a:hover, .next a:hover { border-bottom: none !important; color: #70943e; } .prev a { margin-right: 20px; } .next a { margin-left: 20px; } /**/ .info_flex { display: flex; justify-content: space-between; position: relative; } .info_left { width: 280px; } .info_right { width: calc(100% - 280px); max-width: 1080px; min-height: 230px; } .btn_absolute { position: absolute; left: 0; top: 80px; } .column_li { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 45px; row-gap: 45px; } .column_li a { display: block; color: inherit; background-color: #FFF; padding: 30px; border-radius: 10px; } .column_li .img100 { overflow: hidden; border-radius: 15px; } .column_li .img100 img { width: 100%; height: 180px; object-fit: cover; transition: 0.3s ease; } .column_li a:hover img { transform: scale(1.05); } .column_data { color: #70943e; font-size: 16px; margin: 15px 0 5px; } .column_title { font-size: 16px; } @media only screen and (max-width: 1300px) { .column_li { column-gap: 20px; row-gap: 20px; } } @media only screen and (max-width: 1200px) { /**/ .info_flex { display: block; } .info_left { width: 100%; } .info_right { width: 100%; max-width: 100%; min-height: 0; margin-top: 40px; } .btn_absolute { position: absolute; left: auto; right: 0; top: 0; } .topics_flower02 { top: calc(50% - 50px); } } @media only screen and (max-width: 1200px) { /**/ .info_right { width: 100%; max-width: 100%; min-height: 0; margin-top: 20px; } .column_li a { padding: 15px 15px 20px; } } @media only screen and (max-width: 740px) { /**/ .info_right { width: 100%; max-width: 100%; min-height: 0; margin-top: 20px; } .btn_absolute { top: 5px; } .column_li { grid-template-columns: repeat(2, 1fr); column-gap: 15px; row-gap: 15px; } .column_li a { padding: 15px 15px 20px; } .column_li .img100 { border-radius: 15px; } .column_li .img100 img { height: 130px; } .column_li.top_column li:nth-child(n+3) { display: none; } .column_data { font-size: 14px; margin: 10px 0 5px; } .column_title { font-size: 14px; } .topics_flower02 { top: calc(50% - 20px); } } @media only screen and (max-width: 1000px) { #topics .topics_li li a { display: block; padding: 15px 20px; } } @media only screen and (max-width: 768px) { .topics_flower01 { top: -40px; min-width: 100px; } .topics_li li a { display: block; } .topics_date { margin-bottom: 3px; font-size: 1.4rem; } .pagenation ul { column-gap: 30px; } .pagenation ul li { font-size: 1.8rem; } } /****************************************** [news_detail] ******************************************/ #detail figure { text-align: center; } .detail_ttl { padding-bottom: 30px; border-bottom: 1px solid #b5b5b5; font-weight: 600; font-size: clamp(2rem, 1.3vw, 2.5rem); line-height: 1.6; font-family: "Zen Old Mincho"; letter-spacing: 0.12em; } /****************************************** [reason] ******************************************/ .reason01_pic { position: relative; width: 100%; max-width: 1000px; margin-right: auto; margin-left: auto; border: 1px solid #70943e; border-radius: 15px; } .reason01_pic > img { width: 100%; min-height: 350px; object-fit: cover; border: 5px solid #ffffff; border-radius: 15px; } .reason01_white { z-index: 4; position: relative; padding: 0 60px 60px; } .reason01_white::before { z-index: -1; position: absolute; bottom: 0; left: 0; width: 100%; height: calc(100% - 220px); background-color: #ffffff; content: ""; } .reason01_white .base_txt03 { max-width: 1000px; margin-right: auto; margin-left: auto; } .reason01_num { display: block; z-index: 6; position: relative; margin-top: -35px; text-align: center; } .reason_subbox { width: 100%; padding: 40px; border-radius: 10px; background-color: #edf1e9; } .reason01_ttl { width: fit-content; padding-left: 1em; color: #436d15; font-size: 2rem; line-height: 1.5; text-indent: -1em; } .reason01_ttl::before { display: inline-block; width: 15px; height: 15px; margin-right: 10px; border: 4px solid rgba(67, 109, 21, 0.6); border-radius: 50%; content: ""; } .reason01_subttl { color: #436d15; font-weight: 500; font-size: 1.8rem; line-height: 1.5; text-align: center; } .reason01_subttl span { display: inline-block; margin-right: 12px; padding-right: 10px; border-right: 1px solid #436d15; font-size: 2rem; line-height: 1; } .reason01_li { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 15px 15px; } .reason01_li li { width: calc(33.3333333333% - 10px); padding: 35px 30px 30px; background-color: #ffffff; } .reason01_li i { display: block; width: 80px; margin: 0 auto 5px; } @media only screen and (max-width: 1200px) { .reason01_white { padding: 0 30px 30px; } .reason_subbox { padding: 30px 25px 25px; } } @media only screen and (max-width: 1000px) { .reason_subbox { width: 100%; margin-bottom: 15px; } .reason01_li li { padding: 30px 20px 20px; } } @media only screen and (max-width: 768px) { .reason01_pic > img { min-height: 250px; } .reason01_white { padding: 0 25px 40px; } .reason01_white::before { height: calc(100% - 120px); } .reason01_li li { width: calc(50% - 7.5px); } } @media only screen and (max-width: 480px) { .reason01_white { padding: 0 20px 10px; } .reason01_num { width: 70px; margin: -35px auto 0; } .reason01_li li { width: 100%; padding: 30px 30px 25px; } } /****************************************** [family] ******************************************/ #family01 { position: relative; } .family02_white { position: relative; padding: 60px 40px; background-color: #ffffff; } .family02_num { position: absolute; left: 50%; transform: translateX(-50%); top: -35px; } .family02_flex { display: flex; justify-content: flex-start; width: 48%; } .family02_flex figure { min-width: 160px; } .family02_flex figure img { border-radius: 50%; } @media only screen and (max-width: 1000px) { .family02_flex { width: 100%; } .family02_flex figure { width: 200px; } .family02_flex:first-of-type { margin-bottom: 50px; } } @media only screen and (max-width: 480px) { #family02 .lead_txt06 { font-size: 2.1rem; } .family02_white { position: relative; padding: 50px 25px; background-color: #ffffff; } .family02_flex { display: block; width: 100%; } .family02_flex figure { width: 70%; margin: 0 auto 20px; } } /****************************************** [flow] ******************************************/ .flow01_pic { position: relative; width: 50%; } #flow02 .flow_dl01:first-of-type::before, #flow02 .flow_dl02:first-of-type::before { position: absolute; bottom: -180%; left: 55px; width: 10px; height: 180%; border-left: 10px solid rgba(112, 148, 62, 0.5); content: ""; } #flow02 .flow_dl01:first-of-type::after, #flow02 .flow_dl02:first-of-type::after { left: calc(10% + 55px); } #flow02 .flow_dl01:last-of-type::after, #flow02 .flow_dl02:last-of-type::after { content: none; } .flow_dl01, .flow_dl02 { display: flex; justify-content: flex-start; position: relative; column-gap: 10px; border-radius: 10px; background-color: #ffffff; } .flow_dl01::after, .flow_dl02::after { position: absolute; bottom: -80px; left: 55px; width: 10px; height: 80px; border-left: 10px solid rgba(112, 148, 62, 0.5); content: ""; } .flow_dl01 dt, .flow_dl02 dt { display: flex; position: relative; flex-wrap: wrap; align-items: center; justify-content: center; width: 18%; min-width: 160px; text-align: center; } .flow_dl01 dt span, .flow_dl02 dt span { position: absolute; top: -30px; left: 20px; width: 80px; } .flow_dl01 dt figure, .flow_dl02 dt figure { width: 120px; } .flow_dl01 dd, .flow_dl02 dd { width: 82%; padding: 40px 40px 40px 0; } .flow_dl02 { width: 90%; margin-left: auto; } .flow_dl02::after { left: calc(5% - 10px); } .flow_dl02 dt { width: 15%; min-width: 170px; } .flow_dl02 dt p { font-size: 2.5rem; } .flow_icon { align-self: flex-start; width: 140px; height: 140px; padding: 20px; border-radius: 50%; background-color: #edf1e9; } @media only screen and (max-width: 768px) { #flow02 .flow_dl01:first-of-type::before, #flow02 .flow_dl02:first-of-type::before { left: 40px; } #flow02 .flow_dl01:first-of-type::after, #flow02 .flow_dl02:first-of-type::after { left: calc(60% - 10px); } .flow_dl01, .flow_dl02 { display: block; } .flow_dl01::after, .flow_dl02::after { bottom: -40px; left: calc(50% - 5px); height: 40px; } .flow_dl01 h3, .flow_dl02 h3 { font-size: 2.5rem; } .flow_dl01 dt, .flow_dl02 dt { width: 100%; padding-top: 40px; } .flow_dl01 dt span, .flow_dl02 dt span { top: -20px; left: 10px; width: 70px; } .flow_dl01 dt figure, .flow_dl02 dt figure { width: 100px; } .flow_dl01 dd, .flow_dl02 dd { display: block; width: 100%; padding: 25px; } .flow_dl02 { width: 80%; } .flow_dl02::after { left: calc(50% - 10px); } } /****************************************** [plan] ******************************************/ #memoria01 { position: relative; } #memoria01::before { z-index: -1; position: absolute; bottom: 65%; left: 0; width: 100%; height: 60px; background: url(../images/wave_top.webp) center bottom no-repeat; background-size: 100% auto; content: ""; } #memoria01::after { z-index: -1; position: absolute; bottom: 0; left: 0; width: 100%; height: 65%; background-color: #f9f6ec; content: ""; } #memoria01 .plan_item { background-color: #ffffff; } .memoria_main_pic img { width: 100%; height: 480px; object-fit: cover; } .memoria_txt_area { width: 700px; margin-right: auto; margin-left: auto; } #memoria02 { background-color: #f9f6ec; } #memoria02 .flex_box1000 .table01 tr:last-child { border-bottom: none; } .plan_include_li { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 15px 15px; } .plan_include_li li { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; aspect-ratio: 1/1; width: calc(14.2857142857% - 12.8571428571px); min-width: 180px; border-radius: 10px; background-color: #ffffff; text-align: center; } .plan_include_li li figure { width: 90px; margin: 0 auto; } .plan_include_li li p { margin-top: 15px; font-weight: bold; font-size: 1.5rem; line-height: 1.3; text-align: center; } .memoria02_white { padding: 50px; background-color: #ffffff; } #memoria03 { background-color: #f9f6ec; } .memoria_bnr { display: flex; justify-content: space-between; column-gap: 3%; } .memoria_bnr a { display: block; position: relative; overflow: hidden; border-radius: 6px; box-shadow: 0 0 10px 0 rgba(215, 209, 183, 0.8); } .memoria_bnr a::after { z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(59, 48, 48, 0.3); content: ""; } .memoria_bnr p { z-index: 3; position: absolute; bottom: 0; width: 100%; padding: 8px; color: #ffffff; font-size: 2.5rem; font-family: "Zen Old Mincho"; letter-spacing: 0.06em; text-align: center; } @media only screen and (max-width: 1000px) { .memoria_main_pic img { height: 380px; } #memoria02 .flex_49 { width: 100%; } .memoria_bnr { column-gap: 2%; } .memoria_bnr a img { width: 100%; height: 150px; object-fit: cover; } .memoria_bnr p { padding: 10px; font-size: 2rem; line-height: 1; } } @media only screen and (max-width: 768px) { .memoria_main_pic img { height: 300px; } .memoria_txt_area { width: 100%; } .plan_include_li li { width: calc(33.3333333333% - 10px); } .memoria02_white { padding: 20px 20px 30px; } .memoria_bnr { display: block; width: 360px; margin-right: auto; margin-left: auto; } .memoria_bnr a { margin-bottom: 15px; } .memoria_bnr p { padding: 15px; font-size: 2rem; line-height: 1; } } @media only screen and (max-width: 480px) { .memoria_main_pic img { height: 250px; } .plan_include_li li { width: calc(50% - 7.5px); } .memoria_bnr { width: 100%; } .memoria_bnr a img { height: 210px; } } /****************************************** [hall] ******************************************/ #hall01 .flex_box02 { flex-wrap: wrap; gap: 100px 4%; } .hall_area { width: 100%; display: flex; justify-content: flex-start; column-gap: 5%; margin-bottom: 60px; } .hall_map { height: 450px; } .hall_main { width: fit-content; } .hall_main img { width: 100%; min-height: 400px; object-fit: cover; } .hall_tel { display: flex; justify-content: flex-start; column-gap: 25px; font-weight: bold; font-size: 2rem; line-height: 1; } .hall_tel span { margin-left: 3px; font-size: 3rem; } .hall_flex { z-index: 1; position: relative; display: flex; justify-content: center; column-gap: 8%; } .hall_flex .lead_txt03 { min-width: 30%; } .hall_flex_left { width: 50%; } .hall_pic01 { width: 85%; } .hall_pic02 { width: 35%; margin-top: -5vw; margin-left: auto; } .hall_flower01 { z-index: -1; position: absolute; top: -15%; left: -60px; } .hall_flower02 { z-index: -1; position: absolute; right: 0; bottom: 0; } .hall_flower03 { z-index: -1; position: absolute; right: -180px; bottom: -80px; width: 150px; } .hall_detail_map { height: 700px; } @media only screen and (max-width: 1400px) { .hall_flex { column-gap: 5%; } .hall_flex_left { min-width: 45%; } .hall_tel { flex-wrap: wrap; gap: 10px 20px; gap: 10px 20px; font-size: 1.7rem; } .hall_tel span { font-size: 2.5rem; } } @media only screen and (max-width: 1000px) { #hall01 .flex_box02 { gap: 70px 4%; } #hall01 .flex_47 { width: 100%; } .hall_area { margin-bottom: 40px; } } @media only screen and (max-width: 768px) { .hall_flex { display: block; } .hall_flex_left { width: 80%; margin-right: auto; margin-left: auto; } .hall_flower01 { top: -15%; left: -10%; width: 120px; } .hall_flower02 { bottom: 20px; width: 80px; } .hall_flower03 { right: -10%; bottom: -70px; width: 100px; } .hall_detail_map { height: 600px; } } @media only screen and (max-width: 480px) { .hall_area { display: block; } .hall_area .flex_45 { width: 90%; margin-right: auto; margin-left: auto; } .hall_area .btn01 { margin-left: auto; } .hall_main { width: fit-content; } .hall_main img { min-height: 280px; } .hall_flex_left { width: 90%; margin-left: 0; } .hall_pic02 { width: 42%; margin-top: -40px; } .hall_flower02 { bottom: 10px; width: 60px; } .hall_flower03 { right: -12%; bottom: -80px; width: 90px; } } /****************************************** [consult] ******************************************/ .check_bg { padding: 50px 40px 60px; background-color: #edf1e9; } .consult01_check_li, .hurry01_check_li { width: fit-content; max-width: 980px; margin-right: auto; margin-left: auto; padding: 50px 40px; display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 15px 3%; background-color: #ffffff; } .consult01_check_li li, .hurry01_check_li li { min-width: 400px; padding-left: 30px; font-size: 2rem; line-height: 1.5; font-family: "Zen Old Mincho"; text-indent: -30px; } .consult01_check_li li::before, .hurry01_check_li li::before { margin-right: 10px; content: "\e904"; color: #70943e; font-family: "icomoon"; } .consult03_flex { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 60px 3%; } .consult03_dl { position: relative; width: 48%; padding: 20px 30px; border-radius: 3px; background-color: #f7f7f7; } .consult03_dl dt { margin-bottom: 15px; color: #577929; font-weight: 500; font-size: 2.2rem; font-family: "Zen Old Mincho"; } .consult03_dl dt i { position: absolute; top: -30px; right: 15px; width: 90px; } .consult03_dl dd { padding: 15px 10px 10px 35px; background-color: #ffffff; line-height: 1.2; text-indent: -1.5em; } .consult03_dl dd::before { content: "\e903"; color: #70943e; font-size: 2.2rem; font-family: "icomoon"; vertical-align: middle; } .consult03_dl dd:not(:last-child) { margin-bottom: 5px; } @media only screen and (max-width: 768px) { .check_bg { padding: 30px 20px 20px; } .consult01_check_li, .hurry01_check_li { padding: 30px 20px; } .consult01_check_li li, .hurry01_check_li li { width: 100%; min-width: auto; font-size: 1.8rem; } .consult03_dl { width: 100%; } .consult03_dl dt { font-size: 2rem; } .consult03_dl dt i { top: -20px; width: 70px; } .consult03_dl dd { padding: 15px 10px 10px 30px; } } @media only screen and (max-width: 480px) { .consult02_num { width: 70px; margin: 0 auto 10px; } .consult03_dl { padding: 20px; } } /****************************************** [voice] ******************************************/ .voice_li { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 80px 5%; } .voice_li li { width: 30%; max-width: 500px; } .voice_category { padding: 8px 15px; border-radius: 2px; background-color: #577929; color: #ffffff; font-size: 1.4rem; line-height: 1; } .voice_ttl { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #b5b5b5; font-size: 1.8rem; } .voice_bg { padding: 20px 30px; border-radius: 0 0 15px 15px; background-color: #ffffff; } @media only screen and (max-width: 1280px) { .voice_li li { width: 47%; } } @media only screen and (max-width: 768px) { .voice_category { padding: 8px 10px; } } @media only screen and (max-width: 480px) { .voice_li { gap: 60px 0; } .voice_li li { width: 100%; } } /****************************************** [offering] ******************************************/ .offering01_flex { display: flex; justify-content: center; gap: 40px 3%; } .offering01_flex > div { width: 23%; } .offering01_ttl { margin-bottom: 15px; padding-bottom: 12px; border-bottom: 3px double #666060; color: #436d15; font-size: 2rem; line-height: 1.5; } .offering02_li { display: flex; justify-content: center; flex-wrap: wrap; gap: 40px 5%; } .offering02_li li { width: 230px; } .offering02_num { display: flex; justify-content: space-between; column-gap: 2px; margin-top: 2px; color: #ffffff; font-size: 2rem; line-height: 1; letter-spacing: 0.15em; } .offering02_num p { padding: 10px 15px; background-color: #577929; text-align: center; } .offering02_num p:first-child { width: calc(100% - 4em); background-color: #577929; } .offering02_num p:nth-child(2) { width: 4em; background-color: #70943e; } .offering02_num p:only-child { width: 100%; } .offering02_num span { font-size: 2.2rem; } .offering_price { font-size: 1.7rem; line-height: 1; font-family: "Zen Old Mincho"; letter-spacing: 0.06em; text-align: center; } .offering_price span { font-size: 3rem; } .offering_modal { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 40px 3%; } .offering_modal li { width: 30%; } .offering_modal li a { display: block; cursor: pointer; } /*modaal*/ .modal_box { box-sizing: border-box; z-index: 7777; position: fixed; margin: 0; background: #ffffff; } .modal_box figure img { height: 100vh; } .modal_bg { display: none; z-index: 6666; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(38, 39, 39, 0.8); } .modal_close { position: absolute; top: 15px; right: 15px; color: #ffffff; font-size: 3.5rem; line-height: 1; text-shadow: 0 0 4px #262727; cursor: pointer; } .modal_arrow_left a, .modal_arrow_right a { display: block; position: absolute; top: 50%; transform: translateY(-50%); left: -50px; color: #ffffff; line-height: 1; text-align: center; cursor: pointer; } .modal_arrow_left a i, .modal_arrow_right a i { display: block; font-size: 3rem; } .modal_arrow_left a span, .modal_arrow_right a span { display: none; } .modal_arrow_right a { right: -50px; left: auto; } @media only screen and (max-width: 1280px) { .offering01_flex { flex-wrap: wrap; gap: 40px 5%; } .offering01_flex div { width: 47%; } } @media only screen and (max-width: 768px) { .offering_modal { gap: 20px 3%; } .offering_modal li { width: 48%; } } @media only screen and (max-width: 480px) { .offering01_flex { padding: 0 15px; gap: 30px 0; } .offering01_flex div { width: 100%; } .modal_box { width: calc(100% - 24px); } .modal_box figure img { width: 100%; height: auto; } .modal_arrow_left a, .modal_arrow_right a { top: auto; bottom: -35px; left: 0; transform: translateY(0%); display: flex; justify-content: flex-start; column-gap: 10px; align-items: center; } .modal_arrow_left a i, .modal_arrow_right a i { font-size: 2rem; } .modal_arrow_left a span, .modal_arrow_right a span { display: block; padding-bottom: 0.2em; font-size: 2.2rem; } .modal_arrow_right a { right: 0px; left: auto; } .modal_arrow_right a i { order: 2; } } /****************************************** [hurry] ******************************************/ #hurry_main { background: url(../images/hurry_main.webp) no-repeat; background-size: cover; } .hurry_main_ttl_area, .hurry_main_info_area, .hurry_main_txt_area { margin-left: 39vw; } .hurry_main_ttl { color: #a13c4f; font-weight: bold; font-size: clamp(5rem, 3.38vw, 6.5rem); line-height: 1.3; font-family: "Zen Old Mincho"; letter-spacing: normal; text-shadow: 3px 3px 0 #ffffff, -3px -3px 0 #ffffff, -3px 3px 0 #ffffff, 3px -3px 0 #ffffff, 0px 3px 0 #ffffff, 0 -3px 0 #ffffff, -3px 0 0 #ffffff, 3px 0 0 #ffffff; } .hurry_main_ttl span { margin-left: -0.1em; letter-spacing: -0.2em; } .hurry_main_subttl { font-weight: bold; font-size: clamp(2.8rem, 1.8vw, 3.5rem); line-height: 1.5; font-family: "Zen Old Mincho"; } .hurry_main_subttl span { background: linear-gradient(transparent 80%, #f5eb7c 80%); } .hurry_main_info_area { position: relative; width: fit-content; } .hurry_main_accept { position: absolute; top: -20px; right: -180px; } .hurry_main_balloon { position: relative; padding: 7px 20px; border-radius: 50px; background-color: #70943e; color: #ffffff; font-size: 2.5rem; line-height: 1.5; text-align: center; } .hurry_main_balloon::after { position: absolute; bottom: -15px; left: 200px; width: 30px; height: 16px; background-color: #70943e; content: ""; clip-path: polygon(25% 0, 0% 100%, 100% 0); } .hurry_main_tel { display: flex; justify-content: flex-start; line-height: 1; } .hurry_main_tel i { display: block; margin-top: 0.6em; margin-right: 20px; color: #436d15; font-size: clamp(4rem, 2.8vw, 5.5rem); } .hurry_main_tel p { font-size: clamp(2rem, 1.14vw, 2.2rem); text-align: center; } .hurry_main_tel span { display: block; margin-bottom: 8px; font-weight: bold; font-size: clamp(7rem, 5.2vw, 10rem); letter-spacing: normal; } .hurry_main_line_txt { width: fit-content; padding: 10px 0 10px 15px; border-top: 1px solid #3b3030; border-bottom: 1px solid #3b3030; font-weight: bold; font-size: 2.5rem; } .hurry_main_line_txt span { color: #a13c4f; } .hurry01_check_li { padding: 50px 20px 50px 80px; } .hurry01_check_li li { width: 47%; } .hurry01_check_li li:last-child { width: 100%; } .hurry02_white { position: relative; padding: 60px 100px; background-color: #ffffff; } .hurry02_ttl, .hurry02_ttl02 { position: relative; width: 700px; margin: 0 auto 35px; padding: 10px 60px; border-radius: 70px; background-color: #3b638f; color: #ffffff; font-size: 3.2rem; line-height: 1.5; font-family: "Zen Old Mincho"; letter-spacing: 0.1em; text-align: center; } .hurry02_ttl::after, .hurry02_ttl02::after { display: block; width: 20px; height: 50px; background-image: radial-gradient(circle at 3px center, #3b638f, #3b638f 3px, transparent 3px, transparent 100%); background-size: 6px 16px; background-repeat: repeat-y; content: ""; position: absolute; left: 50%; transform: translateX(-50%); z-index: 5; bottom: -60px; } .hurry02_ttl02 { background-color: #a13c4f; } .hurry02_ttl02::after { background-image: radial-gradient(circle at 3px center, #a13c4f, #a13c4f 3px, transparent 3px, transparent 100%); content: ""; } .hurry_info_inner { z-index: 1; position: relative; width: 90%; margin-right: auto; margin-left: auto; padding: 60px 40px 50px; background-color: #ffffff; } .hurry_info_inner::before { display: block; z-index: -1; position: absolute; top: 5px; left: 5px; width: calc(100% - 10px); height: calc(100% - 10px); border: 1px solid #70943e; content: ""; } .hurry_info_txt_area, .hurry_txt_area { position: relative; width: fit-content; margin-right: auto; margin-left: auto; } .hurry_info_person { z-index: 8; position: absolute; right: -20px; bottom: 0; width: 26vw; min-width: 260px; } @media only screen and (max-width: 1200px) { #hurry_main { background-position: center left 25%; } .hurry_main_ttl_area, .hurry_main_info_area, .hurry_main_txt_area { margin-left: 33vw; } .hurry_main_ttl { font-size: 4.5rem; } .hurry_main_accept { right: -130px; width: 100px; } .hurry_main_line_txt { font-size: 2.2rem; } .hurry01_check_li { padding: 50px 20px 50px 60px; } .hurry02_white { padding: 40px; } } @media only screen and (max-width: 1000px) { #hurry_main { position: relative; background: url(../images/hurry_main_sp.webp) no-repeat; background-size: cover; } #hurry_main::before { position: absolute; top: 0; left: 0; width: 30%; min-width: 220px; height: 60%; background: url(../images/hurry_main_person.webp) no-repeat; background-size: 100% auto; content: ""; } .hurry_main_ttl_area { margin-left: 33%; } .hurry_main_info_area, .hurry_main_txt_area { width: fit-content; margin-right: auto; margin-left: auto; padding: 0 6%; } .hurry_main_txt_area { max-width: 700px; } .hurry_main_accept { right: -80px; } .hurry_main_subttl { font-size: 2.5rem; } .hurry_main_subttl span { background: linear-gradient(transparent 80%, #f5eb7c 80%); } .hurry02_white { padding: 40px 25px 30px; } .hurry_info_inner { width: 100%; padding: 40px; } .hurry_info_txt_area .hurry_main_accept { right: -120px; } .hurry_main_txt_area .font20, .hurry_info_txt_area .font20 { font-size: 1.7rem; letter-spacing: 0.08em; } } @media only screen and (max-width: 768px) { .hurry01_check_li { padding: 30px 10px 30px 20px; } .hurry01_check_li li { width: 100%; font-size: 1.8rem; } .hurry02_ttl, .hurry02_ttl02 { width: 100%; min-width: auto; padding: 12px 30px; font-size: 2.5rem; } .hurry_info_person { right: -50px; min-width: 180px; } } @media only screen and (max-width: 480px) { #hurry_main::before { top: 15px; min-width: 180px; } .hurry_main_ttl_area { margin-left: 190px; } .hurry_main_ttl { font-size: 3.5rem; } .hurry_main_subttl { font-size: 2.2rem; } .hurry_main_accept { z-index: 9; top: -50px; right: -20px; width: 70px; } .hurry_main_balloon { width: 350px; padding: 7px 15px; font-size: 1.8rem; } .hurry_main_balloon::after { bottom: -9px; left: 130px; height: 10px; } .hurry_main_tel i { margin-right: 12px; font-size: 3rem; } .hurry_main_tel p { font-size: 1.6rem; letter-spacing: 0.03em; } .hurry_main_tel span { font-size: 5.5rem; } .hurry_main_line_txt { width: 100%; padding: 10px 0; font-size: 2rem; line-height: 1.5; text-align: center; } .hurry_main_line_txt span { display: block; } .hurry02_white { padding: 30px 25px; } #hurry_info .info_ttl { padding: 0 15px; font-size: 2.8rem; } .hurry_info_txt_area .hurry_main_accept { right: -50px; } .hurry_info_inner { padding: 30px 30px; } .hurry_info_txt_area { width: 100%; } .hurry_info_person { min-width: 210px; } } /****************************************** [contact] ******************************************/ #contact01 .info_ttl::before, #contact01 .info_ttl::after { background-color: #262727; } #contact01 .info_tel { justify-content: center; } #contact01 .info_tel p { font-size: clamp(2rem, 1.56vw, 3rem); } #contact01 .info_tel span { margin-bottom: 10px; font-size: clamp(5rem, 5.2vw, 10rem); } #contact01 .info_tel i { font-size: clamp(3rem, 3.1vw, 6rem); } .contact01_info { position: relative; } .contact01_info .container1000 { padding: 20px 40px; background-color: #ffffff; } .conttact01_person { z-index: 8; position: absolute; right: 0; bottom: 0; width: 25vw; min-width: 260px; } .contact_present { display: flex; justify-content: flex-start; position: relative; column-gap: 10%; align-items: center; padding: 30px 60px; } .contact_present figure { width: 35%; } .contact_present::before { z-index: -1; position: absolute; top: 10%; left: 0; width: 100%; height: 80%; background-color: #edf1e9; content: ""; } .contact_present::after { z-index: 6; position: absolute; top: 10px; left: 40%; transform: rotate(-12deg); content: "Present"; color: #c7d3ba; font-size: 6rem; font-family: "Parisienne"; letter-spacing: 0.06em; } .contact_present_ttl { margin-bottom: 20px; color: #436d15; font-weight: bold; font-size: clamp(4rem, 3.1vw, 6rem); line-height: 1; text-align: center; } .contact_present_txt { font-size: 2.5rem; line-height: 1.7; } form input[type=text], form input[type=tel], form input[type=email], form select, form textarea { width: 100%; padding: 10px 15px; border: none; outline: none; background-color: #ffffff; } form textarea { height: 300px; min-height: 200px; } form input[type=radio] { margin-right: 0.5em; } form input[type=checkbox] { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; margin: 0; padding: 0; padding-left: 40px; border: none; border-radius: 0; outline: none; background: none; vertical-align: middle; cursor: pointer; } form input[type=checkbox]::before, form input[type=checkbox]:after { display: block; position: absolute; content: ""; } form input[type=checkbox]::before { top: 50%; left: 5px; width: 30px; height: 30px; transform: translateY(-50%); border: 1px solid #a3a4a4; border-radius: 0%; background-color: #ffffff; } form input[type=checkbox]::after { top: -7px; left: 12px; width: 16px; height: 10px; transform: rotate(-45deg); border-bottom: 3px solid #3b638f; border-left: 3px solid #3b638f; opacity: 0; } form input[type=checkbox]:checked::after { opacity: 1; } .req { position: absolute; top: 43px; right: 25px; padding: 2px 5px 3px; border-radius: 2px; background-color: #a13c4f; color: #ffffff; font-weight: 500; font-size: 1.2rem; line-height: 1; } .postal { width: 10em; display: flex; justify-content: flex-start; column-gap: 15px; align-items: center; } .form_radio01 .wpcf7-radio { display: flex; justify-content: flex-start; gap: 10px 3em; } .form_radio02 .wpcf7-radio span:not(:last-child) { margin-bottom: 5px; } .form_hurry { color: #8f293c; font-weight: bold; font-size: 1.8rem; } .form_hurry span { font-size: 2.5rem; } .form_policy { width: 80%; height: 300px; margin-right: auto; margin-left: auto; padding: 50px; overflow: auto; border: 1px solid #b5b5b5; background-color: #ffffff; } .recaptcha_policy { font-size: 1.2rem; text-align: center; } .send_btn button[type=submit] { display: block; width: 440px; margin-right: auto; margin-left: auto; padding: 25px 10px; border: none; border: 2px solid #ffffff; border-radius: 10px; background-color: #70943e; box-shadow: 0 0 15px 0 rgba(38, 39, 39, 0.3); color: #ffffff; font-size: 2.5rem; line-height: 1; letter-spacing: 0.15em; text-align: center; transition: 0.5s; } .send_btn button[type=submit] span { display: block; margin-bottom: 8px; font-size: 1.5rem; letter-spacing: 0.06em; } .send_btn button[type=submit]:hover { background-color: #628236; } .wpcf7 form .wpcf7-response-output { border: none !important; text-align: center; } @media only screen and (max-width: 1300px) { .contact_present { column-gap: 5%; } .contact_present figure { width: 30%; } .contact_present::after { top: -10px; left: 32%; font-size: 5rem; } .contact_present_txt { font-size: 1.8rem; } } @media only screen and (max-width: 1000px) { #contact01 h3 { font-size: 2.5rem; } } @media only screen and (max-width: 768px) { #contact01 h3 { font-size: 2.2rem; } .contact_present { display: block; padding: 40px 30px 25px; } .contact_present figure { width: 50%; min-width: 270px; } .contact_present::before { top: 0; height: 100%; } .contact_present::after { top: -30px; left: -10px; font-size: 4.5rem; } .contact_present_txt { text-align: center; } .conttact01_person { right: -50px; min-width: 260px; } .form_radio01 .wpcf7-radio { display: block; } .form_radio01 .wpcf7-radio span:not(:last-child) { margin-bottom: 5px; } .form_policy { width: 100%; padding: 30px 25px; } .req { display: inline-block; position: static; margin-left: 15px; } } @media only screen and (max-width: 480px) { #contact .container1280 { width: 94%; } .contact_txt { width: 90%; margin-right: auto; margin-left: auto; } .send_btn button[type=submit] { width: 340px; padding: 20px 10px; font-size: 2.2rem; } } /**************************************************** 葬儀費用・プラン ****************************************************/ .title_50 { font-size: clamp(26px, 4.5vw, 50px); letter-spacing: 0.06em; } .af_bb:after { content: ""; border-bottom: 2px solid #436d15; width: 80px; display: block; margin-top: 20px; } .af_bb.center:after { margin-left: auto; margin-right: auto; } .font_min { font-family: "Zen Old Mincho"; } .text_20 { font-size: clamp(16px, 2vw, 20px); } .plan02_absolute { position: absolute; right: 0; top: 20px; } /********************/ .plan02_flex { display: flex; justify-content: space-between; } .plan02_left { width: 50%; } .plan02_right { width: 47%; max-width: 660px; order: 2; } .plan02_right img { min-height: 520px; height: 100%; width: 100%; object-fit: cover; border-radius: 20px; } .blue_3b638f { color: #3b638f; } .t_left { text-align: left; } .letter003 { letter-spacing: 0.03em; } .letter006 { letter-spacing: 0.06em; } /***/ .plan02_cont { display: flex; justify-content: space-between; column-gap: 10px; } .plan02_cell1 { width: 35%; display: flex; align-items: center; justify-content: center; background-color: #f9f6ec; position: relative; } .plan02_cell1 i { font-size: clamp(15px, 2.2vw, 27px); margin-right: 15px; color: #a9a59a; position: absolute; top: 50%; transform: translateY(-50%); left: 13%; } .plan02_cell1 p { padding-left: 30px; font-size: clamp(15px, 1.5vw, 20px); } .plan02_cell1 p span { font-size: clamp(20px, 2.5vw, 30px); } .plan02_cell2 { width: 65%; display: flex; justify-content: space-between; column-gap: 10px; } .plan02_cell2 > p { width: 33.33%; font-size: clamp(15px, 1.6vw, 20px); background-color: #3b638f; display: flex; align-items: center; justify-content: center; text-align: center; color: #FFF; border-radius: 6px; padding: 10px 0; } .plan02_cell2 > p.gray_d1cec5 { background-color: #d1cec5 !important; } .plan02_cell2.gree_style > p { background-color: #70943e; } .plan02_cell2.red_style > p { background-color: #8f293c; } .plan02_cell2.yellow_style > p { background-color: #bd8f02; } /*****/ .plan02_bb { border-bottom: 1px solid #c9c9c9; padding: 110px 0; } .plan02_bt { margin-top: 50px; } .plan02_bt:before { content: ""; background-image: linear-gradient(to right, #c9c9c9 2px, transparent 2px); background-size: 5px 2px; background-repeat: repeat-x; display: block; width: 100%; height: 2px; } .plan02_fee_flex { display: flex; flex-wrap: wrap; align-items: flex-end; padding-top: 30px; } .plan02_fee_flex > p { margin-right: 20px; letter-spacing: 0; } .plan02_la { color: #8f293c; font-size: clamp(30px, 5.6vw, 72px); position: relative; width: fit-content; line-height: 1em; } .plan02_la .mini { font-size: clamp(20px, 3.2vw, 40px); } .plan02_la .la_absolute { font-size: clamp(1px, 1vw, 12px); position: absolute; top: -15%; right: 3px; } .plan02_sm { font-size: clamp(18px, 3vw, 34px); position: relative; width: fit-content; line-height: 1em; padding-bottom: 10px; } .plan02_sm .mini { font-size: clamp(14px, 2.4vw, 21px); } .plan02_sm .la_absolute { font-size: clamp(1px, 1.3vw, 9px); position: absolute; top: -25%; right: -2px; } /***/ .green_70943e { color: #70943e; } .red_8f293c { color: #8f293c; } .yellow_bd8f02 { color: #bd8f02; } .mini_star { font-size: 10px; } /**メモリア55*****************************/ .option_list li { background-color: #FFF; padding: 20px 30px 20px 50px; position: relative; } .option_list li:before { content: ""; background-color: #436d15; width: 8px; height: 8px; border-radius: 50%; position: absolute; left: 20px; top: 32px; } .option_list li:nth-child(n+2) { margin-top: 10px; } @media only screen and (max-width: 767px) { /**************************************************** 葬儀費用・プラン ****************************************************/ .af_bb:after { content: ""; border-bottom: 2px solid #436d15; width: 80px; display: block; margin-top: 20px; } .af_bb.center:after { margin-left: auto; margin-right: auto; } .plan02_absolute { position: absolute; right: 0; top: 20px; } .plan02_absolute img { width: 80px; height: auto; } /********************/ .plan02_bb { padding: 50px 0; } .plan02_flex { display: block; } .plan02_left { width: 100%; margin-top: 20px; } .plan02_right { width: 100%; max-width: 100%; } .plan02_right img { min-height: auto; height: auto; border-radius: 20px; } /***/ .plan02_cell1 i { font-size: clamp(18px, 2.2vw, 27px); } .plan02_cell1 p { font-size: clamp(16px, 1.7vw, 20px); } .plan02_cell1 p span { font-size: clamp(22px, 2.7vw, 30px); } .plan02_cell2 > p { font-size: clamp(17px, 1.6vw, 20px); padding: 5px 0; } /*****/ .plan02_bt { margin-top: 30px; } .plan02_fee_flex { display: flex; flex-wrap: wrap; align-items: flex-end; padding-top: 20px; } .plan02_fee_flex > p { margin-right: 20px; letter-spacing: 0; } .plan02_la { font-size: 40px; } .plan02_la .mini { font-size: 22px; margin-left: 5px; } .plan02_la .la_absolute { font-size: 11px; top: -18%; right: -4px; } .plan02_sm { font-size: 26px; line-height: 1em; padding-bottom: 2px; } .plan02_sm .mini { font-size: 17px; margin-left: 5px; } .plan02_sm .la_absolute { font-size: 11px; position: absolute; top: -35%; right: -6px; } /**メモリア55*****************************/ .option_list li { padding: 15px 15px 15px 40px; } .option_list li:before { top: 25px; } } /******************************************** ご葬儀の知識 ********************************************/ .bg_f9f6ec { background-color: #f9f6ec; } .know_tab { max-width: 950px; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 25px; row-gap: 25px; } .know_tab a { background-color: #436d15; transition: 0.3s ease; color: #FFF; border: 1px solid #436d15; border-radius: 6px; padding: 15px 0; position: relative; display: block; text-align: center; } .know_tab a:hover { background-color: #FFF; color: #436d15; } .know_tab a:hover .arrow { background-image: url("../images/arrow_g.webp"); } .know_tab .arrow { background: url("../images/arrow_w.webp") 50% 0/100% 100% no-repeat; width: 11px; height: 7px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); transition: 0.3s ease; } /**************/ .know_icon { text-align: center; } .title_56 { font-size: clamp(28px, 5.2vw, 56px); } .know_flex { display: flex; justify-content: space-between; } .know_left { max-width: 820px; width: 58%; } .know_left img { width: 100%; height: 100%; min-height: 540px; object-fit: cover; border-radius: 15px; } .know_right { width: 38%; max-width: 545px; display: flex; align-items: center; } .know_num { display: flex; align-items: center; font-size: 22px; width: fit-content; color: #436d15; } .know_num:before { content: ""; width: 40px; border-bottom: 1px solid #436d15; margin-right: 10px; position: relative; top: 2px; } .text_18 { font-size: clamp(16px, 1.8vw, 18px); } .know_list > div { background-color: #FFF; border-radius: 10px; padding: clamp(40px, 5.5%, 80px) clamp(30px, 5%, 70px); } .know_list > div:nth-child(n+2) { margin-top: 30px; } .know_list h3 { font-size: clamp(24px, 3.2vw, 35px); color: #436d15; } .know_list h3:after { content: ""; background-image: linear-gradient(to right, #c9c9c9 2px, transparent 2px); background-size: 5px 2px; background-repeat: repeat-x; display: block; width: 100%; height: 2px; margin: 25px 0 35px; } .know_list p { letter-spacing: 0.03em; } .know_bg { background-color: #f8f4f4; padding: 40px; border-radius: 10px; } .know_bg h4 { font-size: 20px; color: #436d15; background: none; padding: 0; font-weight: 500; margin-left: -10px; } /**/ .know_table { width: 100%; } .know_table tr:nth-child(odd) td { background-color: #ede4da; } .know_table th { background-color: #666060; color: #FFF; border: 1px solid #FFF; padding: 10px 10px; } .know_table td { border: 1px solid #666060; padding: 15px 10px; } .know_table th, .know_table td { font-size: 18px; width: 25%; letter-spacing: 0.03em; } .know_table th > p, .know_table td > p { width: 100%; max-width: 190px; margin: 0 auto; } .know_table.w25 th, .know_table.w25 td { width: 25%; } /*****/ .know_bg2 { background-color: #f8f4f4; border-radius: 10px; padding: 35px 40px; } .know_bg2 .ml_minus { margin-left: -10px; } .title_20 { font-size: 20px; padding: 0; background: none; font-weight: 500; } .dot_title { color: #4c4545; font-size: 18px; background: none; padding: 0; font-weight: 600; font-family: "Zen Kaku Gothic New", "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif; letter-spacing: 0.06em; margin: 0; border-radius: 0; position: relative; padding-left: 20px; } .dot_title:before { content: ""; background-color: #436d15; width: 8px; height: 8px; border-radius: 50%; position: absolute; left: 0; top: 10px; } /******************/ .know_bg_text { font-size: 25px; background-color: #436d15; padding: 2px 15px; color: #FFF; width: fit-content; border-radius: 3px; } .indent_p { text-indent: -1em; padding-left: 1em; } .style_reset { background: none; padding: 0; font-weight: 600; font-family: "Zen Kaku Gothic New", "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif; letter-spacing: 0.06em; margin: 0; border-radius: 0; } .green_436d15 { color: #436d15; } .title_25 { font-size: clamp(18px, 2.2vw, 25px); font-weight: 500; } .know_table2 { width: 100%; } .know_table2 th, .know_table2 td { border: 1px solid #666060; padding: 10px; text-align: center; font-size: 18px; } .know_table2 th { background-color: #ede4da; font-weight: 500; width: 45%; } .know_table2 td { background-color: #FFF; width: 55%; } /*************/ .know_flex2 { display: flex; justify-content: space-between; flex-wrap: wrap; } .know_flex2 > div { width: 48%; max-width: 600px; background-color: #f8f4f4; border-radius: 10px; padding: 30px 38px; } .know_flex2 h4 { margin: 20px 0; } /*************/ .know_table3 { width: 100%; font-size: 18px; background-color: #FFF; } .know_table3 th, .know_table3 td { border: 1px solid #666060; font-weight: 500; line-height: 1.5em; letter-spacing: 0.03em; } .know_table3 tr:nth-child(1) th { background-color: #666060; color: #FFF; padding: 10px; } .know_table3 th { text-align: center; background-color: #ede4da; padding: 15px 10px; } .know_table3 th:nth-child(1) { width: 24%; } .know_table3 th:nth-child(2) { width: 18%; } .know_table3 th:nth-child(3) { width: 24%; } .know_table3 th:nth-child(4) { width: 35%; } .know_table3 td { padding: 25px 20px; } @media only screen and (max-width: 1024px) { .know_tab { column-gap: 10px; row-gap: 10px; font-size: 15px; } .know_tab .arrow { display: none; } /**************/ .know_icon { text-align: center; } .title_56 { font-size: clamp(28px, 5.2vw, 56px); } .know_flex { display: block; } .know_left { max-width: 100%; width: 100%; } .know_left img { height: 450px; min-height: 450px; } .know_right { width: 100%; max-width: 100%; display: block; margin-top: 40px; } /**/ .know_table th, .know_table td { font-size: 15px; } /*************/ .know_table3 th, .know_table3 td { font-size: 15px; } } @media only screen and (max-width: 767px) { .know_tab a { padding: 10px 0 25px; height: 100%; display: flex; justify-content: center; align-items: center; line-height: 1.4em; } .know_tab .arrow { display: block; right: 50%; top: auto; bottom: 10px; transform: translateX(50%); } /**************/ .know_left img { height: auto; min-height: auto; } .know_right { margin-top: 20px; } .know_num { font-size: 20px; } .know_list > div { padding: 30px; } .know_list > div:nth-child(n+2) { margin-top: 20px; } .know_list h3 { font-size: 22px; } .know_list h3:after { margin: 18px 0 20px; } .know_bg { padding: 30px 20px; } .know_bg h4 { font-size: 18px; } /**/ .scroll_table { overflow-x: scroll; } .know_table { width: 800px; } /*****/ .know_bg2 { padding: 30px 20px; } .know_bg2 .ml_minus { margin-left: -12px; } .title_20 { font-size: 19px; } .dot_title { font-size: 17px; } /******************/ .know_bg_text { font-size: 18px; } .know_table2 { width: 100%; } .know_table2 th, .know_table2 td { padding: 10px 5px; text-align: center; font-size: 15px; } .know_table2 th { width: 42%; } .know_table2 td { width: 58%; } /*************/ .know_flex2 { grid-row-gap: 20px; } .know_flex2 > div { width: 100%; padding: 30px 20px; position: relative; } .know_flex2 h4 { margin: 0 0 20px; } .know_flex2 .icon { position: absolute; right: 20px; top: 8px; } .know_flex2 .icon img { width: 70px; height: auto; } .know_flex2 .center { text-align: left; } /*************/ .know_table3 { width: 900px; } .know_table3 th, .know_table3 td { font-size: 15px; } .know_table3 th { padding: 15px 5px; } .know_table3 th:nth-child(1) { width: 25%; } .know_table3 th:nth-child(2) { width: 21%; } .know_table3 th:nth-child(3) { width: 23%; } .know_table3 th:nth-child(4) { width: 32%; } .know_table3 td { padding: 25px 10px; } } /****************************************** [改行切り替え] ******************************************/ .pc { display: block; } .sp { display: none; } @media only screen and (max-width: 480px) { .pc { display: none; } .sp { display: block; } } /**************************************************** 2025/04/21 トップ追加 ****************************************************/ .top_column { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 45px; row-gap: 40px; .col_title { font-size: clamp(14px,1.5vw, 18px); } } .top_column .img100 { overflow: hidden; border-radius: 15px; } .top_column .img100 img { width: 100%; height: 220px; object-fit: cover; object-position: center; transition: 0.3s ease; } .top_column a:hover img { transform: scale(1.05); } /**************************************************** 2025/04/21 コラム追加 ****************************************************/ .column_flex { display: flex; justify-content: space-between; } .column_left { max-width: 880px; width: 72%; } .column_right { max-width: 335px; width: 25%; } .column_li_in { display: flex; justify-content: space-between; flex-wrap: wrap; row-gap: 45px; > li { max-width: 395px; width: 48%; } } .column_li_in a { display: block; color: inherit; padding-bottom: 15px; position: relative; height: 100%; &:after { content: ""; position: absolute; bottom: 0; left: 0; height: 1px; width: 100%; background-image : linear-gradient(to right, #4c4545 3px, transparent 1px); background-size: 6px 1px; background-repeat: repeat-x; } } .column_li_in .img100 { overflow: hidden; border-radius: 15px; } .column_li_in .img100 img { width: 100%; height: 265px; object-fit: cover; transition: 0.3s ease; } .column_li_in a:hover img { transform: scale(1.05); } .cate_list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 20px; > p { color: #FFF; border-radius: 50px; padding: 3px 10px; font-size: 15px; line-height: 1.3em; } } .cate1 { background-color: #3b638f; } .cate2 { background-color: #8f293c; } .cate3 { background-color: #bd8f02; } .cate4 { background-color: #866990; } .cate5 { background-color: #cc7d28; } .col_title { font-size: clamp(16px,1.5vw, 19px); font-weight: 500; font-feature-settings: "palt" 1; letter-spacing: 0.06em; line-height: 1.5em; padding: 15px 0; } .col_time { color: #70943e; font-size: clamp(13px,1.2vw, 16px); } .tag_list { display: flex; flex-wrap: wrap; column-gap: 20px; grid-row-gap: 5px; font-size: 13px; padding: 20px 0 0; } /***/ .side_title { font-size: clamp(17px,1.7vw, 19px); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #4c4545; padding-bottom: 10px; column-gap: 10px; } .side_cate { a { color: inherit; display: flex; align-items: center; column-gap: 15px; padding: 20px 0; position: relative; border-bottom: 1px solid #c9c9c9; font-size: clamp(14px,1.5vw, 17px); &:before { content: ""; width: 9px; height: 9px; border-radius: 50%; } } > p:nth-child(1) a:before { background-color: #436d15; } > p:nth-child(2) a:before { background-color: #3b638f; } > p:nth-child(3) a:before { background-color: #8f293c; } > p:nth-child(4) a:before { background-color: #bd8f02; } > p:nth-child(5) a:before { background-color: #866990; } > p:nth-child(6) a:before { background-color: #cc7d28; } .arrow { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } } .side_tag { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; p { line-height: 1.3em; letter-spacing: 0.08em; } a { display: inline-block; font-size: 15px; padding: 3px 10px; border-radius: 50px; color: #4c4545; border: 1px solid #4c4545; } } .ranking_list { margin-top: 5px; > div { padding: 40px 0; border-bottom: 1px solid #c9c9c9; } a { display: flex; justify-content: space-between; align-items: flex-start; color: inherit; } } .rank_thumb { position: relative; width: 100px; img { width: 100%; height: 100px; object-fit: cover; } &:before { content: ""; position: absolute; left: -5px; top: -5px; width: 25px; height: 25px; display: flex; justify-content: center; align-items: center; color: #FFF; border-radius: 50%; font-size: 17px; background-color: #d3a003; padding-left: 2px; } } .ranking_list > div { &:nth-child(1) .rank_thumb:before { content: "1"; background-color: #d3a003; } &:nth-child(2) .rank_thumb::before { content: "2"; background-color: #707070; } &:nth-child(3) .rank_thumb::before { content: "3"; background-color: #ae672f; } &:nth-child(4) .rank_thumb::before { content: "4"; background-color: #4c4545; } &:nth-child(5) .rank_thumb::before { content: "5"; background-color: #4c4545; } } .rank_right { width: calc(100% - 120px); } .rank_cate { font-size: 14px; width: fit-content; padding: 3px 15px; border-radius: 50px; color: #FFF; line-height: 1.3em; } .rank_title { font-size: clamp(14px,1.3vw, 16px); letter-spacing: 0.06em; line-height: 1.5em; margin-top: 10px; font-feature-settings: "palt" 1; } /***詳細*************************/ .detail_flex { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .detail_cate { display: flex; gap: 5px; p { line-height: 1.3em; padding: 3px 15px; color: #FFF; border-radius: 50px; font-size:clamp(15px,1.5vw, 18px); } } .detail_time { display: flex; flex-wrap: wrap; column-gap: 15px; font-size:clamp(13px,1.5vw, 16px); color: #979a93; } h2.detail_title { text-align: left; font-weight: 500; font-size: clamp(20px,2.8vw, 35px); padding: 50px 0 40px; position: relative; line-height: 1.5em; &:after { content: ""; position: absolute; bottom: 0; left: 0; height: 1px; width: 100%; background-image : linear-gradient(to right, #4c4545 3px, transparent 1px); background-size: 6px 1px; background-repeat: repeat-x; } } .detail_tag { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 10px; a { display: block; color: #4c4545; border: 1px solid #4c4545; border-radius: 50px; padding: 0 10px 3px; line-height: 1.5em; } } .detail_thumbnail { margin-top: 50px; img { width: 100%; height: auto; } } .detail_author { background-color: #FFF; border: 1px solid #4c4545; border-radius: 15px; padding: clamp(20px, 10%, 40px) clamp(20px, 10%, 40px); margin-top: 50px; display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; } .author_icon { width: 140px; img { width: 100%; margin: 0 !important; height: auto; } } .author_txt { width: calc(100% - 170px); .txt17 { font-size: 17px; margin: 0; } h3.txt17 { margin: 5px 0 15px; font-family: "Zen Kaku Gothic New", "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif; } .txt15 { font-size: 15px; } } .detail_banner { display: flex; justify-content: space-between; margin-top: clamp(40px, 11%, 100px); > div { width: 48.5%; } img { width: 100%; height: auto; } } .tag_title { font-size: clamp(24px,2.5vw, 31px); font-weight: 500; margin-bottom: 40px; letter-spacing: 0.1em; border-bottom: 1px solid #4c4545; padding-bottom: 20px; span { font-size: clamp(17px,1.7vw, 22px); display: inline-block; } &.cate_dot_title { display: flex; align-items: center; column-gap: 15px; &:before { content: ""; width: 9px; height: 9px; border-radius: 50%; } &.dot_cate1:before { background-color: #436d15; } &.dot_cate2:before { background-color: #3b638f; } &.dot_cate3:before { background-color: #8f293c; } &.dot_cate4:before { background-color: #bd8f02; } &.dot_cate5:before { background-color: #866990; } &.dot_cate6:before { background-color: #cc7d28; } } } .rank_cate_list { display: flex; flex-wrap: wrap; gap: 5px; } @media only screen and (max-width: 1024px) { /**************************************************** 2025/04/21 コラム追加 ****************************************************/ .column_flex { display: block; } .column_left { max-width: 100%; width: 100%; } .column_right { max-width: 100%; width: 100%; margin-top: 60px; display: flex; flex-wrap: wrap; justify-content: space-between; grid-row-gap: 50px; > div { width: 48%; &:nth-child(3) { width: 100%; } } .side_title { margin-top: 0; } } } @media only screen and (max-width: 768px) { /**************************************************** 2025/04/21 トップ追加 ****************************************************/ .top_column { grid-template-columns: repeat(2, 1fr); column-gap: 20px; grid-row-gap: 20px; > div:nth-child(n+3) { display: none; } } /**************************************************** 2025/04/21 コラム追加 ****************************************************/ .column_right { margin-top: 40px; grid-row-gap: 30px; > div { width: 48%; &:nth-child(3) { width: 100%; } } } .column_li_in { row-gap: 30px; } .cate_list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; > p { padding: 3px 10px; font-size: 13px; } } .side_title { justify-content: flex-start; line-height: 1.5em; } .col_title { font-size: clamp(14px,1.5vw, 19px); padding: 5px 0; } .side_cate a { padding: 10px 0; img { vertical-align:baseline; } } .side_tag { margin-top: 10px; gap: 5px; } .tag_list { column-gap: 10px; font-size: 13px; padding: 10px 0 0; } .ranking_list { margin-top: 5px; display: flex; flex-wrap: wrap; justify-content: space-between; > div { width: 48%; padding: 20px 0; border-bottom: 1px solid #c9c9c9; } a { display: flex; justify-content: space-between; align-items: flex-start; color: inherit; } } .rank_thumb { width: 80px; img { height: auto; } } .rank_right { width: calc(100% - 90px); } .rank_cate { font-size: 12px; padding: 0px 5px; } .rank_title { font-size: 13px; margin-top: 5px; } /***詳細*************************/ h2.detail_title { padding: 20px 0 20px; } .detail_tag { margin-top: 20px; a { padding: 3px 10px 3px; } } .detail_thumbnail { margin-top: 30px; img { width: 100%; height: auto; } } .detail_author { background-color: #FFF; border: 1px solid #4c4545; border-radius: 15px; padding: 20px; margin-top: 30px; display: block; margin-bottom: 20px; position: relative; } .author_icon { width: 80px; position: absolute; top: 13px; left: 20px; } .author_txt { width: 100%; .txt17 { font-size: 16px; margin: 0; padding-left: 100px; } h3.txt17 { margin: 5px 0 25px; } .txt15 { font-size: 15px; } } .detail_banner { display: flex; flex-wrap: wrap; grid-row-gap: 10px; > div { width: 100%; } } .column_li_in .img100 img { width: 100%; height: 160px; object-fit: cover; transition: 0.3s ease; } .top_column .img100 img { height: 160px; } }