@charset "utf-8"; /* CSS Document */ /* ====================================================== [original] @import"../css/test_line.css"; ====================================================== */ /* [250310-0920/250311]校正　文字大きくする */ :root { --line_height : 1.75; --font : clamp(0.75rem, 0.525rem + 0.75vw, 1.125rem); --gap : calc(var(--font) * 2); --tracking : 0em; --max_width : clamp( 480px, calc(100% - 1em), calc(var(--em) * 80)); --max_width : clamp( 480px, calc(100% - 1em), calc(var(--em) * 86)); --padding_tb : 10em; --padding_tb : calc(var(--font) * 6); --h1_h : 10em; --logo_h : 2.25em; --drawer_toggle_size : 2em; --r2 : 245 161 0; --pk : 252 76 122; --or2 : 226 152 32; --y : 255 221 16; --bl : 0 146 203; --navy : 34 53 70; --navy : 2 18 47; --border_color : var(--bk) / 0.1; --gradation1_bl : 48 182 193; --gradation1_ygr : 217 250 133; --gradation2_gr : 82 200 122; --gradation2_ygr : 179 228 100; --gradation_y : 251 253 68; --txt_shadow_w : drop-shadow(0 0 0.5em rgb(var(--w) / 0.5)); --txt_shadow_dark : drop-shadow(0 0 0.2em rgb(var(--bk))); --footer_bl : 203 255 255; --arrow_color : var(--bl); --blank_icon_color : var(--bl); --mask_arrow_line_r : url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='icon' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-mask:new 0 0 50 50;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%237AC943;%7D%0A%3C/style%3E%3Cpolygon id='XMLID_2_' class='st0' points='21.395,14.376 19.981,15.79 29.191,25 19.981,34.21 21.395,35.624 32.02,25 '/%3E%3C/svg%3E"); --round_top : url("data:image/svg+xml,%3Csvg version='1.1' id='pass' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' preserveAspectRatio='none' viewBox='0 0 800 120' style='enable-background:new 0 0 800 120;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FF7BAC;%7D%0A%3C/style%3E%3Cpath id='round_x5F_top' class='st0' d='M800,100c0,6.667,0,20,0,20H0c0,0,0-13.333,0-20C220.914-33.333,579.086-33.333,800,100z'/%3E%3C/svg%3E"); --summer_event_color1 : 0 142 213; --summer_event_color2 : 0 57 144; --summer_event_color3 : 25 96 57; --nanohana_color1 : 248 222 0; --nanohana_color2 : 0 109 59; } /* [250117/250121]校正　上下節約 --drawer_toggle_size : 5em; --h1_h : 15em; */ /* ------------------------------------------------------------------------------------------------------------ transform: rotate(0.03deg); ------------------------------------------------------ [240513]　DLL→upは著作権に関連するかも知れないので、通常に戻す ------------------------------------------------------ */ .G_regular, body { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } .G_light { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 200; font-style: normal; } .G_bold { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; } :is(h2, .h2) { font-weight: 700; } .G_black { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 900; font-style: normal; } :is(h4, .h4) { font-weight: 900; } /* [251010]新規　ナール */ .MG_regular { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 400; font-style: normal; } .MG_demi_bold, .id_nanohana .News .NewMark { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 500; font-style: normal; } .MG_bold { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 700; font-style: normal; } .MG_black { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 900; font-style: normal; } /* [250117/250121]校正　ポップ体使わない .montserrat-alternates-regular { font-family: "Montserrat Alternates", sans-serif; font-weight: 400; font-style: normal; } .tel-num { font-family: "Montserrat Alternates", sans-serif; font-weight: 600; font-style: normal; } .montserrat-alternates-bold { font-family: "Montserrat Alternates", sans-serif; font-weight: 700; font-style: normal; } */ .M_light { font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: 200; font-style: normal; } .M_regular, #Index .Index .scroll_loop, .M_Regular { font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } .M_bold, .pagetitle, .News .NewMark, .ModelDetail .Step li.start::before, .ModelDetail .Step li.goal::after { font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; } /* @font-face { font-family: 'Custom Avenir'; src: local('Avenir Light'); font-weight: 300; size-adjust: 106%; } @font-face { font-family: 'Custom Avenir'; src: local('Avenir Heavy'); font-weight: 700; size-adjust: 106%; } body { font-family: 'Custom Avenir', 'Hiragino Sans', sans-serif; } font-family: Yu Gothic, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; */ /* [240513]　DLL→upは著作権に関連するかも知れないので、通常に戻す ------------------------------------------------------ 和欧混植 font-sizeの微調整 https://qiita.com/xrxoxcxox/items/e5c11e41a6e6b8b63482 ------------------------------------------------------ @font-face { font-family: 'Barlow Condensed'; src: url("../download/BarlowCondensed-Thin.ttf"); font-weight: 100; size-adjust: 135%; } @font-face { font-family: 'Barlow Condensed'; src: url("../download/BarlowCondensed-ExtraBold.ttf"); font-weight: 800; size-adjust: 135%; } .GconThin, .CategoryTitle h1 .title { font-family: 'Barlow Condensed', sans-serif; font-weight: 100; letter-spacing: normal; } .GconHv, h2>em, .ColorBtn>em, .Header .GlobalMenu, .Drawer a .name { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: normal; } */ /* ------------------------------------------------------------------------------------------------------------ */ #Contents::before, #Index .Index .gradation { background: none; background-image: linear-gradient( var(--gradation_angle), rgb(var(--gradation_color_start)), rgb(var(--gradation1_ygr)), rgb(var(--gradation_color_end)) ); background-color: rgb(var(--w) / 0); } /* overflow-x: hidden; */ #Contents::before, #Index .Index .Ct1 .gradation { --gradation_angle : 180deg; --gradation_color_start : var(--gradation1_bl); --gradation_color_end : var(--gradation_y); } #Index .Index .Ct2 .gradation { --gradation_angle : 0deg; --gradation_color_start : var(--gradation2_gr); --gradation_color_end : var(--gradation_y); } #Contents::before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.3; } body:not(#Index) .Footer .weve_bottom { filter: brightness(3); } /* */ /* colorbtn / pk */ .ColorBtn.ColorPK, .ColorBtn.BtnOK, .ColorBtn[onclick*="Kakunin"] { --border_color : var(--w) / 0; --button_bg_color : var(--pk); --color : var(--w); --arrow_color : var(--w); color: rgb(var(--w)); border-color: rgb(var(--border_color)); font-weight: bold; } .ColorBtn.ColorPK::after { background-color: rgb(var(--w)); } /* ------------------------------------------------------------------------------------------------------------ <文字> */ .pagetitle { padding-top: calc(var(--gap) * 1.5); background-color: transparent; overflow: visible; } .pagetitle::before, .pagetitle::after { --w_size : 15em; --w_size : 7.5em; content: ""; display: block; position: absolute; left: 50%; top: 0; translate: -50% -0%; width: 100%; background-color: rgb(var(--bl) / 0.1); mask-image: linear-gradient(#000, #000), url(../img/mask_wave_header.png); mask-position: center, center calc(100% + 1px); mask-repeat: no-repeat, repeat-x; mask-size: 100%, var(--w_size); mask-composite: exclude; } .pagetitle::before { height: calc(100% + (var(--gap) * 0.5)); background-color: rgb(var(--bl) / 0.25); } .pagetitle::after { height: calc(100% + (var(--gap) * 0.5)); background-color: rgb(var(--footer_bl) / 0.5); mask-size: 100%, calc(var(--w_size) * 0.53); } .pagetitle :is(a, .a) { z-index: 2; } .pagetitle .title { gap: 0.5em; } /* [250117/250121]校正　上下節約 gap: calc(var(--gap) / 3); */ .pagetitle .title>*:first-child { font-size: 1.8em; } /* [250117/250121]校正　上下節約 font-size: 4em; */ .pagetitle .title>*:first-child.name { font-size: 1.8em; } .pagetitle .title>*:not(:first-child) { font-size: 1.2em; } .pagetitle.Image { --h1_h : 25em; } .pagetitle .Img { filter: brightness(0.7); opacity: 0.75; } .pagetitle:not(.Image) { color: rgb(var(--bk) / 0.6); } :is(h2, h3):first-of-type { margin-top: 0; } h2, .h2 { --border_color : var(--bl); --h2_gap : 0.5em; display: flex; flex-direction: column; align-items: center; gap: calc(var(--gap) / 2); max-width: var(--max_width); margin-top: var(--gap); margin-bottom: var(--gap); margin: var(--gap) auto; line-height: 1.5; } /* [250117/250121]校正　上下節約 --h2_gap : 1em; justify-content: center; line-height: 1; */ :is(h2, .h2)>b, .BlogOldBacknumber .detail h2 { padding: var(--h2_gap); background-color: rgb(var(--bl) / 0.8); border-color: rgb(var(--bl)); font-size: 2em; color: rgb(var(--w)); border-radius: 3em; } :is(h2, .h2)>b { display: grid; gap: var(--h2_gap); min-width: 17em; font-weight: inherit; } /* h2::before { aspect-ratio: 1 / 1; content: ""; display: block; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 20em; background-image: url(../img/flower_1.png); background-position: center; background-repeat: no-repeat; background-size: contain; filter: brightness(115%) grayscale(30%); opacity: 0.5; } filter: brightness(125%) grayscale(50%); *//* border-width: 3px; mask-image: linear-gradient(#000, #000), url(../img/mask_wave_L.svg); mask-position: 0 0, right bottom; mask-size: 100%, 20%; mask-repeat: no-repeat, repeat-x; mask-composite: exclude; */ :is(h2, .h2)>span { font-size: 1.2em; font-weight: bolder; } :is(h3, .h3, .Blog.Detail .post .post-title) { text-align: center; margin-bottom: 5em; } :is(h3, .h3)>b, .Blog.Detail .post .post-title { font-size: 2em; color: rgb(var(--bl)); filter: grayscale(80%) contrast(200%);; min-width: initial; padding: 0; background-color: transparent; border-radius: 0; } :is(h3, .h3)::before, .Blog.Detail .post .post-title::before { content: ""; display: block; position: absolute; left: 50%; top: calc(100% - (3em / 2)); translate: -50% -0%; width: 10em; height: 3em; background-image: url(../img/wave_line.svg); background-position: left bottom; background-repeat: repeat-x; background-size: 50px; } /* background-size: 5em; */ .h3 { margin-bottom: 3em; } .h3::before { font-size: 0.8em; background-size: 2.5em; } /* [250128-0955]校正　波線　スポット・詳細だけ幅いっぱいにする */ .Spot.ArticleDetail article>.Wrap .head :is(h3, .h3) { margin-bottom: 1em; } .Spot.ArticleDetail article>.Wrap .head :is(h3, .h3)::before { width: 100%; } /* #News .NewsDetail .detail .h3>b { font-size: 1.75em; } */ :is(h4, .h4), .BlogOldBacknumber .detail .blog_nen_title, .SpotIndex .body .head_title { padding: 0.5em 1em; background-color: rgb(var(--y)); border-radius: 0.5em; } :is(h4, .h4)>b, .SpotIndex .body .head_title>b { font-size: 1.3em; display: block; min-width: 10em; } /* border-color: rgb(var(--bk) / 0.25); border-width: 1px; */ /* h4>b:after { content: ""; display: block; position: absolute; left: calc(100% - 2em); top: 100%; width: 10em; border-top-width: 1px; border-top-style: dashed; } */ .News .List h2>b { color: inherit; } .Gallery h3>b, #Index .Index h3>b { color: inherit; filter: none; } h2.mini, .BlogOldBacknumber .detail h2 { } /* font-weight: inherit; font-family: inherit; font-weight: inherit; */ h2.mini>b, .BlogOldBacknumber .detail h2 { font-size: 1.5em; } .BlogOldBacknumber .detail h2 { border-radius: 0.5em; } .SpotIndex .body .head_title { line-height: 2.35; font-family: inherit; font-weight: inherit; } .SpotIndex .body .head_title>b { line-height: inherit; font-family: inherit; font-weight: bold; padding: 0; background-color: transparent; border-radius: 0; color: inherit; } :is(h3, .h3).mini { margin-bottom: 2em; } :is(h3, .h3).mini::before { content: none; } :is(h3, .h3).mini>b { font-size: 1.3em; } :is(h4, .h4).mini { background-color: rgb(var(--y) / 0.5); font-weight: inherit; } :is(h4, .h4).mini::before { content: none; } :is(h4, .h4).mini>b { font-size: 1.2em; } :is(h2, h3, h4).plain, :is(h2, h3, h4).plain>b { width: auto; min-width: initial; max-width: initial; height: auto; min-height: initial; max-height: initial; padding: 0; background-color: transparent; color: inherit; border-radius: 0; } :is(h2, h3, h4).plain::before { content: none; } h2.plain>b { font-size: 1.5em; } h3.plain>b { font-size: 1.3em; } h4.plain>b { font-size: 1.2em; } .Under { --under_offset : -0.1em; } .kome_mark { opacity: 0.3; } /* ------------------------------------------------------------------------------------------------------------ */ .pagetitle, .PageNavi { z-index: 5; } body { } /* [250123] stickyが効かなくなる #Document { overflow-x: hidden; } */ :where(section, .section):nth-of-type(even) { background-color: transparent; } .WrapS, body:not(#Index) .Main .WrapM { max-width: calc(var(--max_width) - (var(--padding_tb) * 2)); width: 100%; } /* padding-left: var(--padding_tb); padding-right: var(--padding_tb); */ body:not(#Index) .Main .WrapM .WrapM { width: initial; margin-left: initial; margin-right: initial; padding-left: 0; padding-right: 0; } .WrapL { width: calc(var(--max_width) - (var(--gap) * 2)); margin-left: auto; margin-right: auto; } .WrapS { margin-left: auto; margin-right: auto; } .memo, .Notes { --memo_head_h : 3em; margin: 0; padding: var(--gap); background-color: rgb(var(--w)); border-width: 2px; border-style: dashed; } .memo_dotted { border-width: 2px; border-style: dotted; border-color: rgb(var(--bg_color) / 0.5); } .Notes { display: grid; justify-content: center; gap: var(--gap); margin-top: calc(var(--memo_head_h) / 2); margin-bottom: 0; } .Notes>.head { font-size: 1.2em; font-weight: bold; display: grid; align-items: center; position: absolute; left: 50%; top: calc(0em - (var(--memo_head_h) / 2)); translate: -50% -0%; width: auto; min-width: 12em; height: var(--memo_head_h); margin-top: 0; margin-bottom: 0; background-color: rgb(var(--y)); border-width: 2px; border-style: dashed; border-color: rgb(var(--w) / 0.5); border-radius: 100em; z-index: 2; } .Notes>.head::before { content: none; } .Notes>.head>b { font-size: inherit; color: inherit; min-width: initial; max-width: initial; width: auto; padding: 0; background-color: transparent; } .Notes>.head+.txt { margin-top: var(--gap); } .Notes>.Wrap { display: inline-block; text-align: left; } /* 誓約 */ .form .seiyaku>.Wrap { display: grid; gap: 2em; } /* 提出先 */ /* [250127]校正　左揃えるか中央 */ .shinsei_uketsuke { font-size: 1.2em; } .shinsei_uketsuke>* { display: block; } .shinsei_uketsuke .name { font-weight: bold; } /* .shinsei_uketsuke>div { display: flex; font-size: 1.2em; } .shinsei_uketsuke>div.name { font-weight: bold; gap: 1em; } .shinsei_uketsuke>div:not(.name) { margin-left: 2em; } .shinsei_uketsuke>div:not(.name)>*:first-of-type { width: 6em; text-align: right; } .shinsei_uketsuke .open_close { gap: 0; } */ .arrow_circle { aspect-ratio: 1 / 1; background-color: rgb(var(--bl)); width: 2.5em; mask-image: linear-gradient(#000, #000), var(--mask_arrow_line_r); mask-position: center; mask-repeat: no-repeat; mask-composite: exclude; border-radius: 100em; } .arrow_circle>* { aspect-ratio: 1 / 1; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 100%; overflow: hidden; opacity: 0; } /* ------------------------------------------------------ [250704-1059]　任意の順番、色変え */ body:not(.type_design_original) .Drawer .List>.Wrap>ul { display: flex; flex-wrap: wrap; gap: var(--gap); } body:not(.type_design_original) .Drawer .List>.Wrap>ul>li { order: 10; width: calc((100% - (var(--gap) * 2)) / 3); } body:not(.type_design_original) .Drawer .Change .details .summary { background-color: transparent; } body:not(.type_design_original) .Drawer .Change .details input + .summary { } body:not(.type_design_original) .Drawer .List>.Wrap>ul>li.ClassIndex { order: 1; width: 100%; } body:not(.type_design_original) .Drawer .List>.Wrap>ul>li.ClassContact { order: 2; } body:not(.type_design_original) .Drawer .List>.Wrap>ul>li.ClassPamphlet { order: 3; } body:not(.type_design_original) .Drawer .List>.Wrap>ul>li:is(.ClassIndex, .ClassContact, .ClassPamphlet) { } /* border-width: 0; border-radius: 0; */ body:not(.type_design_original) .Drawer .List>.Wrap>ul>li:is(.ClassIndex, .ClassContact, .ClassPamphlet) .details, body:not(.type_design_original) .Drawer .List>.Wrap>ul>li:is(.ClassIndex, .ClassContact, .ClassPamphlet) .Child { } /* border-radius: 0; */ body:not(.type_design_original) .Drawer .Change :is(.ClassIndex, .ClassContact, .ClassPamphlet) .details .summary .Btn>*:before, body:not(.type_design_original) .Drawer .Change :is(.ClassIndex, .ClassContact, .ClassPamphlet) .details .summary .Btn>*:after { border-color: rgb(var(--w) / 1); } body:not(.type_design_original) .Drawer .List :is(.ClassIndex, .ClassContact, .ClassPamphlet) a:not([target="_blank"]) .title>.name { display: block; } body:not(.type_design_original) .Drawer .List :is(.ClassIndex, .ClassContact, .ClassPamphlet) .Child { } body:not(.type_design_original) .Drawer .List :is(.ClassIndex, .ClassContact, .ClassPamphlet) .Child>ul { display: block; } body:not(.type_design_original) .Drawer .List :is(.ClassIndex, .ClassContact, .ClassPamphlet) .Child>ul>li { } body:not(.type_design_original) .Drawer .List :is(.ClassIndex, .ClassContact, .ClassPamphlet) .Child a { padding-left: var(--gap); } body:not(.type_design_original) .Drawer .List :is(.ClassIndex) a { } body:not(.type_design_original) .Drawer .List :is(.ClassIndex) a:not([target="_blank"]) .title { } /* display: block; */ body:not(.type_design_original) .Drawer .List :is(.ClassIndex) a:not([target="_blank"]) .title::before { } /* aspect-ratio: 1; position: absolute; width: 0; overflow: hidden; */ body:not(.type_design_original) .Drawer .List>.Wrap>ul>li:is(.ClassContact, .ClassPamphlet) { width: calc((100% - (var(--gap) * 1)) / 2); border-width: 0; } body:not(.type_design_original) .Drawer .List :is(.ClassContact, .ClassPamphlet) a:not([target="_blank"]) .title { gap: 2em; color: rgb(var(--w)); } /* */ body:not(.type_design_original) .Drawer .List :is(.ClassContact, .ClassPamphlet) a:not([target="_blank"]) .title::before { margin-left: 1em; background-color: transparent; border-radius: 0; mask: none; scale: 2; filter: brightness(0) invert(1); } /* */ body:not(.type_design_original) .Drawer .List>.Wrap>ul>li:is(.ClassContact, .ClassPamphlet) .details, body:not(.type_design_original) .Drawer .List>.Wrap>ul>li:is(.ClassContact, .ClassPamphlet) .Child { border-radius: 0; } /* */ body:not(.type_design_original) .Drawer .List :is(.ClassContact) a:not([target="_blank"]) .title::before { background-image: url(../img/mail_alt.svg); background-position: center; background-repeat: no-repeat; background-size: contain; scale: 1.75; } body:not(.type_design_original) .Drawer .List :is(.ClassContact) a { background-color: rgb(var(--or)); } body:not(.type_design_original) .Drawer .List :is(.ClassContact) a:hover { background-color: rgb(var(--or) / 0.7); } body:not(.type_design_original) .Drawer .Change :is(.ClassContact) .details input + .summary:hover { background-color: rgb(var(--w) / 0.2); } body:not(.type_design_original) .Drawer .Change :is(.ClassContact) .Child a { background-color: rgb(var(--or) / 1); } body:not(.type_design_original) .Drawer .Change :is(.ClassContact) .Child a:hover { background-color: rgb(var(--or) / 0.7); } body:not(.type_design_original) .Drawer .List :is(.ClassPamphlet) a:not([target="_blank"]) .title::before { background-image: url(../img/icon_book.png); background-position: center; background-repeat: no-repeat; background-size: contain; } body:not(.type_design_original) .Drawer .List :is(.ClassPamphlet) a { background-color: rgb(var(--gradation2_gr)); } body:not(.type_design_original) .Drawer .List :is(.ClassPamphlet) a:hover { background-color: rgb(var(--gradation2_gr) / 0.7); } body:not(.type_design_original) .Drawer .Change :is(.ClassPamphlet) .details input + .summary:hover { background-color: rgb(var(--w) / 0.2); } body:not(.type_design_original) .Drawer .Change :is(.ClassPamphlet) .Child a { background-color: rgb(var(--gradation2_gr) / 1); } body:not(.type_design_original) .Drawer .Change :is(.ClassPamphlet) .Child a:hover { background-color: rgb(var(--gradation2_gr) / 0.7); } /* ------------------------------------------------------ mask　を波型で下を削る */ .mask_wave { mask-image: linear-gradient(#000, #000), url(../img/mask_wave.svg); mask-repeat: repeat-x; mask-position: center calc(100% + 1px); mask-size: 102%; mask-composite: exclude; } /* mask-position: bottom; mask-position: 100% 100%, 0 calc(100% + 2px); mask-position: 100% 100%, 0 100%; mask-size: 102%, 102%; mask-composite: add; mask-composite: subtract; mask-composite: intersect; */ .mask_wave img { padding-bottom: 1px; } .mask_wave_img { mask-image: linear-gradient(#000, #000), url(../img/mask_wave_img.svg); mask-repeat: repeat-x; mask-position: bottom; mask-size: 102%; mask-composite: exclude; } /* mask-position: 100% 100%, 0 calc(100% + 1px); mask-size: 102%, 102%; */ .mask_wave_img img { padding-bottom: 1px; border-radius: 1em 1em 0 0; } .lead { margin-top: 0; margin-bottom: 0; } /* ------------------------------------------------------ 工事中です */ .maintenance { --border_color : var(--gradation2_gr) / 0.5; --maintenance1_img : url(../img/flower_1.png); --maintenance1_size : contain; --maintenance2_img : url(../img/flower_2.png); --maintenance2_size : contain; --maintenance3_img : url(../img/flower_3.png); --maintenance3_size : contain; --maintenance4_img : url(../img/flower_4.png); --maintenance4_size : contain; aspect-ratio: 1 / 1; display: inline-block; min-width: 25em; border-width: 2px; } .maintenance .title { font-size: 1.5em; } .maintenance>*>* { aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: center; align-items: center; align-content: center; gap: 1em; padding: 0 var(--gap) var(--gap) var(--gap); } .maintenance::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-width: 2px; rotate: -3.5deg; } .maintenance>*::before, .maintenance>*>*::before, .maintenance>*::after, .maintenance>*>*::after { aspect-ratio: 1 / 1; content: ""; display: block; position: absolute; width: 10em; } .maintenance>*::before { bottom: -10%; left: -20%; right: initial; rotate: 30deg; background-image: var(--maintenance1_img); background-repeat: no-repeat; background-size: var(--maintenance1_size); background-position: center; } /* background-color: rgb(var(--or2)); margin-top: 1px; margin-left: 1px; mask-image: var(--maintenance1_img); mask-repeat: no-repeat; mask-size: var(--maintenance1_size); mask-position: center; opacity: 0.25; mask-image: linear-gradient(#000, #000), url(../img/w1827_1_flower01.png); mask-composite: exclude; */ .maintenance>*>*::before { bottom: -15%; left: 15%; right: initial; rotate: -15deg; background-image: var(--maintenance2_img); background-repeat: no-repeat; background-size: var(--maintenance2_size); background-position: center; } .maintenance>*::after, .maintenance>*>*::after { } .maintenance>*::after { bottom: -20%; left: initial; left: 55%; rotate: -25deg; scale: -1 1; background-image: var(--maintenance3_img); background-repeat: no-repeat; background-size: var(--maintenance3_size); background-position: center; } /* background-color: rgb(var(--or2)); margin-top: 1px; margin-left: 1px; mask-image: var(--maintenance2_img); mask-repeat: no-repeat; mask-size: var(--maintenance2_size); mask-position: center; opacity: 0.25; mask-image: linear-gradient(#000, #000), url(../img/w1827_1_flower01.png); mask-composite: exclude; */ .maintenance>*>*::after { bottom: -5%; left: initial; right: -20%; rotate: 10deg; background-image: var(--maintenance4_img); background-repeat: no-repeat; background-size: var(--maintenance4_size); background-position: center; } /* ------------------------------------------------------------------------------------------------------------ */ .NoImg { background-image: url(../images/logo_symbol.png); background-position: center; background-repeat: no-repeat; background-size: 5em; opacity: 0.2; } .NoImg::after { content: none; } /* ------------------------------------------------------------------------------------------------------------ */ .Main a { text-decoration-line: underline; } a.ColorBtn { text-decoration-line: none; } a[href^="tel:"] { text-decoration-line: none; } a[href^="tel:"]::before { top: 100%; } a[target]:not( [href*=".pdf"], [href*=".doc"], [href*=".xlsx"] )>*::before { background-color: rgb(var(--blank_icon_color)); background-image: none; mask-image: url(../img/layers.svg); mask-position: center; mask-repeat: no-repeat; mask-size: calc(var(--href_icon_size) * 0.8); mask-composite: exclude; } table a[target]>*::before, .spotdata-detail a[target]>*::before, .Convenient .Ct.locker .detail .tr.url a[target]>*::before { background-color: rgb(var(--bk)); } :is( .Index.SpecialIndex .Gallery .List, .event_calendar .main ) a[target]>* { grid-template-columns: 1fr; } :is( .Index.SpecialIndex .Gallery .List, .event_calendar .main ) a[target]>*::before { content: none; } .Sitemap .body ul:not(.SNS) a[target] { --href_icon_size : 1em; } /* .Sitemap .body ul:not(.SNS) a[target] { --href_icon_size : 1.25em; } .Sitemap .body ul:not(.SNS) a[target]::before { display: none; } .Sitemap .body ul:not(.SNS) a[target]>* { margin-left: -0.25em; } .Sitemap .body ul:not(.SNS) a[target]>*::before { background-color: rgb(var(--bk)); } */ .ColorBtn { --border_color : var(--bl); --button_bg_color : var(--w); --color : var(--bl); --arrow_color : var(--bl); --padding_lr : 3em; color: rgb(var(--color)); min-width: 20em; justify-content: stretch; padding-left: calc(var(--padding_lr) / 2); padding-right: var(--padding_lr); background-color: rgb(var(--button_bg_color)); border-radius: 2em; text-align: left; } /* gap: calc(var(--gap) / 3); padding: 0.3em; */ .ColorBtn::before, .Footer .ColorBtn::after { content: none; } .ColorBtn::after { aspect-ratio: 1 / 1; left: initial; right: 0.5em; width: initial; height: calc(var(--padding_lr) * 0.7); background-color: rgb(var(--arrow_color)); clip-path: none; clip-path: circle(50% at 50% 50%); border-radius: 100em; mask-image: linear-gradient(#000, #000), var(--mask_arrow_line_r); mask-position: center; mask-repeat: no-repeat; mask-composite: exclude; } /* [241204-1143]　「border-radius: 100em;」のみだと下が欠ける? border-radius: 100em; background-color: transparent; clip-path: none; background-image: url(../img/arrow_circle_r.svg); background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; top: initial; left: initial; right: initial; bottom: initial; transform: none; */ .ColorBtn>* { text-align: left; } /* display: inline-block; */ .ColorBtn.small { margin-top: 1em; font-size: 0.8em; min-width: initial; max-width: initial; justify-self: center; background-color: transparent; color: inherit; } .ColorBtn.small::after { aspect-ratio: 1 / 1; width: 2em; height: auto; } .ColorBtn[class*="Back"] { justify-content: end; padding-left: var(--padding_lr); padding-right: calc(var(--padding_lr) / 2); } .ColorBtn[class*="Back"]::after { left: 0.3em; right: initial; } .Footer .ColorBtn { min-width: initial; max-width: initial; width: 100%; } .Footer .footer_btn .ColorBtn { --border_color : var(--w); --button_bg_color : transparent; --color : var(--w); --arrow_color : transparent; padding-left: 0; padding-right: 0; justify-content: center; width: 100%; border-radius: 0; background-color: rgb(var(--bk) / 0.1); } /* ------------------------------------------------------ カテゴリボタン */ .NaviBtn { --border_color : var(--bl); --num : 3; display: flex; flex-wrap: wrap; justify-content: center; align-content: stretch; gap: var(--gap); color: rgb(var(--bl)); } /* align-items: stretch; align-items: center; align-content: center; */ .NaviBtn>* { width: calc((100% - (var(--gap) * (var(--num) - 1))) / var(--num)); } .NaviBtn>.Item, .NaviBtn>.Item>*, .NaviBtn>.Item a { display: grid; } .NaviBtn>.Item { --icon_size : 4em; } .NaviBtn>.Item>.Wrap { } .NaviBtn .ColorBtn { min-width: initial; max-width: initial; width: 100%; } .NaviBtn a:not(.ColorBtn) .Gallery { margin: 0; } .NaviBtn a:not(.ColorBtn) { text-decoration-line: none; display: grid; gap: calc(var(--gap) / 3); padding: 1em 0.25em; padding: 1em 0.5em; background-color: rgb(var(--w)); border-width: 1px; border-radius: 1em; } /* align-items: center; align-items: start; padding: 1em calc(var(--icon_size) + 1em); */ .NaviBtn a:not(.ColorBtn) .icon { display: flex; justify-content: center; justify-items: center; gap: 0; width: 100%; } /* position: absolute; bottom: 100%; left: 50%; translate: -50% -0%; */ .NaviBtn a:not(.ColorBtn) .icon .Img { width: 100%; height: var(--icon_size); } /* display: inherit; */ .NaviBtn a:not(.ColorBtn) .icon img { aspect-ratio: 1 / 1; width: var(--icon_size); } /* position: absolute; top: 50%; right: calc(100% + 0.25em); translate: -0% -50%; */ .NaviBtn a:not(.ColorBtn) .title { display: flex; flex-direction: column; justify-content: center; justify-items: center; align-items: center; gap: calc(var(--gap) / 3); } /* flex-direction: column-reverse; display: inline-block; display: grid; justify-content: center; justify-items: center; */ .NaviBtn a:not(.ColorBtn) .title>b { font-size: 1.2em; display: inline-grid; text-align: justify; line-height: 1.5; } .NaviBtn a:not(.ColorBtn) .title>b>span:last-of-type { font-size: 0.8em; } .NaviBtn.AnchorBtn { } .NaviBtn.AnchorBtn .title>.before { font-size: 0.9em; } .NaviBtn.AnchorBtn .title>.before+b { font-size: 1.1em; font-weight: bold; } /* ------------------------------------------------------------------------------------------------------------ */ table { background-color: transparent; border-width: 0; } /* border-collapse: separate; border-spacing: 0 1em; */ th, td { padding-top: 3em; padding-bottom: 3em; border-color: rgb(var(--border_color)); border-bottom-width: 1px; background-color: transparent; } th { padding-left: 0; } th:first-of-type { } th>b { } .Required>*::after { --arrow_w : 0.5em; --arrow_h : 0.5em; --arrow_position_l : calc((100% - var(--arrow_w)) / 2); content: "必須"; position: absolute; left: 0; bottom: calc(100% - (var(--arrow_h) / 2)); padding: 1em 0.5em calc(1em + var(--arrow_h)); background-color: rgb(var(--or)); color: rgb(var(--w)); clip-path: polygon( 0 0, 100% 0, 100% calc(100% - var(--arrow_h)), calc(var(--arrow_position_l) + var(--arrow_w)) calc(100% - var(--arrow_h)), calc(var(--arrow_position_l) + (var(--arrow_w) / 2)) 100%, var(--arrow_position_l) calc(100% - var(--arrow_h)), 0 calc(100% - var(--arrow_h)) ); font-weight: bold; letter-spacing: 0.15em; } td { width: auto; } table :is(input, textarea) { background-color: rgb(var(--w)); outline-color: rgb(var(--border_color)); } thead :where(th, td) { padding: 1em; } thead>tr:first-of-type>:where(th, td) { background-color: rgb(var(--gradation2_gr) / 0.2); border-top-width: 3px; border-top-style: double; } /* ------------------------------------------------------------------------------------------------------------ */ select, input, textarea, button { font-family: inherit; } ::placeholder { color: rgb(var(--bk) / 0.5); } /* 装飾 */ .input_btn { --border_radius : 0.1em; --input_btnsize : 1em; --radio_size : calc(var(--input_btnsize) - (1px * 2)); --check_border_width : 3px; } label.input_btn .title:before { background-color: rgb(var(--w)); border-color: rgb(var(--bk) / 0.2); } /* 装飾　radio */ label.input_btn input[type="radio"] ~ .title::before { } label.input_btn input[type="radio"]:checked ~ .title::before { background-color: rgb(var(--arrow_color)); } label.input_btn input[type="radio"] ~ .title::after { content: none; } /* 装飾　checkbox */ label.input_btn input[type="checkbox"] ~ .title::before { } /* ------------------------------------------------------------------------------------------------------------
    ,
      ,
      */ table :is(ul, ol) { } dt { border-width: 0; padding: 0.25em 1em; } /* filter: drop-shadow(1px 1px 0px rgb(var(--bk) / 0.1)); color: rgb(var(--w)); */ dt::before { --arrow_w : 1em; --arrow_h : 0.75em; --arrow_position_l : 1em; content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: calc(100% + var(--arrow_h)); background-color: rgb(var(--gradation2_gr) / 0.5); clip-path: polygon( 0 0, 100% 0, 100% calc(100% - var(--arrow_h)), calc(var(--arrow_position_l) + var(--arrow_w)) calc(100% - var(--arrow_h)), calc(var(--arrow_position_l) + (var(--arrow_w) / 2)) 100%, var(--arrow_position_l) calc(100% - var(--arrow_h)), 0 calc(100% - var(--arrow_h)) ); } dt>b { font-weight: inherit; } /* ------------------------------------------------------------------------------------------------------------ */ .Logo { } .Logo img { aspect-ratio: 1064 / 188; width: 24em; height: auto; } /* [250128-0955]校正　
      の幅を開放したら、左がくっついたので空き追加 */ .Header .Wrap:not(.WrapM)>.Logo { padding-left: 1em; } .Header .WrapM>.Logo { } /* ------------------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------------------
      */ #Document { overflow-x: hidden; } #Header { position: fixed; } .Header::before { background-color: rgb(var(--w) / 0.7); opacity: 1.0; } .scroll .Header { background-color: transparent; opacity: 1.0; } .scroll .Header::before { opacity: 1.0; } .scroll body:not(#Index) .Header::before { background-color: rgb(var(--w) / 0.95); } /* [250117/250121]校正　上下節約 */ .Header>.Wrap { width: calc(100% - (var(--drawer_toggle_size) + 3vw)); padding-top: 0.5em; padding-bottom: 0.5em; } /* padding-right: calc(var(--drawer_toggle_size) + 1.5vw);; */ .Header .Navi { display: block; align-items: center; gap: 3vw; } /* flex-direction: row; margin-right: calc(var(--drawer_toggle_size) + 3vw); [250128-1610]校正　「いい感じ」に全部拡げる flex-direction: row; align-items: center; gap: 0; margin-right: calc(var(--drawer_toggle_size) + 2em); */ .Header>.Wrap>.Wrap { display: flex; justify-content: space-between; gap: 0; } /* [260122-1139]　多言語対応が増えたので可変に display: grid; grid-template-columns: 23vw 1fr 15vw; justify-content: space-between; gap: 1.5vw; gap: 0; [250128-1610]校正　「いい感じ」に全部拡げる gap: 0; */ .Header>.Wrap>.Wrap>.Logo { width: 23vw; } .Header>.Wrap>.Wrap>.Navi { } .Header>.Wrap>.Wrap>.search_box_script { width: 15vw; } /* ------------------------------------------------------------------------------------------------------------ */ .GlobalMenu { } .Header .GlobalMenu { display: block; font-size: 0.9em; } .Header .GlobalMenu>.Wrap { margin: 0 auto; } .GlobalMenu ul { justify-content: space-between; gap: 0; } /* [250128-1610]校正　「いい感じ」に全部拡げる gap: 1.5vw; gap: 3vw; */ .GlobalMenu :is(a, .a) { padding-left: 0.75em; padding-right: 0.75em; } /* [child]ありの親 */ .GlobalMenu .ChildOn.PullDown :where(a, .a)::after { --arrow_weight : 2px; position: relative; top: initial; left: initial; right: initial; bottom: initial; transform: none; content: ""; display: inherit; aspect-ratio: 7 / 5; width: 0.6em; background-color: rgb(var(--bk)); clip-path: polygon( 50% calc(100% - var(--arrow_weight)), 100% 0, 100% var(--arrow_weight), 50% 100%, 0% var(--arrow_weight), 0 0 ); } /* position: absolute; left: calc(100% + 0.4em); top: 50%; translate: -0% -50%; */ /* [child] # [250310-0920/250312]校正　右端が見えないブラウザがあった... */ .GlobalMenu .ChildOn.PullDown .Child { position: fixed; top: calc(var(--logo_h) * 1.5); left: 50%; translate: -50% -0%; color: inherit; } .GlobalMenu .ChildOn.PullDown .Child>ul { flex-direction: row; } .GlobalMenu .ChildOn.PullDown .Child>ul>li { min-width: 7em; background-color: rgb(var(--w) / 0.9); } /* min-width: 6em; */ .GlobalMenu .ChildOn.PullDown .Child :where(a, .a) { display: grid; justify-content: center; justify-items: center; } /* padding-left: 2em; padding-right: 2em; */ .GlobalMenu .ChildOn.PullDown .Child :where(a, .a)::after { content: none; } .GlobalMenu .ChildOn.PullDown .Child :where(a, .a):hover { background-color: rgb(var(--bl) / 0.5); } .GlobalMenu .ChildOn.PullDown .Child :where(a, .a) .icon { } /* width: 1.5em; */ .GlobalMenu .Child>ul>li.child_MenuOn>* { background-color: rgb(var(--y)); } /* ------------------------------------------------------ [260122-1139]　多言語対応 */ .GlobalMenu .ClassLanguage.PullDown .Child { position: absolute; top: calc(var(--logo_h) * 1.25); left: 50%; translate: -50% -0%; color: inherit; } .GlobalMenu .ClassLanguage.PullDown .Child>ul { display: grid; } .GlobalMenu .ClassLanguage.PullDown .Child>ul>li { } .GlobalMenu .ClassLanguage.PullDown .Child :where(a, .a)>span { display: block; } .GlobalMenu .ClassLanguage.PullDown .Child :where(a, .a)>span::before { aspect-ratio: 1; position: absolute; width: 0; overflow: hidden; } /* ------------------------------------------------------------------------------------------------------------
      */ #Contents { } body:not(#Index) #Contents>.Wrap { z-index: 10; } .Main { } body:not(#Index) .Main { } body .Main>.Wrap { display: grid; gap: var(--padding_tb); padding-top: calc(var(--padding_tb) / 2); padding-bottom: var(--padding_tb); } body:not(.type_design_special_detail) .Main>.Wrap :is(section, .section, article) { padding-top: 0; padding-bottom: 0; } /* body:not(#Index) .Main>.Wrap>:is(section, .section):first-of-type { padding-top: calc(var(--padding_tb) / 2); } */ body#Index .Main>.Wrap { display: block; padding: 0; } body#Index .Main>.Wrap :is(section, .section, article) { padding-top: var(--padding_tb); padding-bottom: var(--padding_tb); } /* ------------------------------------------------------------------------------------------------------------ ページナビ */ .PageNavi { --clip_rate : 1em; background-color: transparent; padding: 0; } /* */ .pagetitle.Image+.Main .PageNavi { position: absolute; left: 0; right: 0; bottom: calc(100% + 1em); } /* position: sticky; top: 0; */ .PageNavi>.Wrap { } .PageNavi .main { display: inline-flex; gap: var(--clip_rate); background-color: rgb(var(--w) / 0.8); border-width: 1px; border-color: rgb(var(--bl) / 0.15); border-radius: 100em; overflow: hidden; } .PageNavi .main>span { gap: 0; padding: 1em calc(var(--clip_rate) * 2); } .PageNavi .main>span::after { content: none; } .PageNavi .main>span::before { content: ""; display: block; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: calc(100% + (var(--clip_rate) * 2)); height: calc(100% + 1em); clip-path: polygon( calc(100% - var(--clip_rate)) 0%, 100% 50%, calc(100% - var(--clip_rate)) 100%, 0% 100%, var(--clip_rate) 50%, 0% 0% ); } .PageNavi .main>span:first-of-type:before { clip-path: polygon( 0% 0%, calc(100% - var(--clip_rate)) 0%, 100% 50%, calc(100% - var(--clip_rate)) 100%, 0% 100% ); } .PageNavi .main>span:nth-child(1)::before { background-color: rgb(var(--y)); } .PageNavi .main>span:nth-child(2)::before { background-color: rgb(var(--gradation1_bl) / 0.35); background-color: rgb(var(--gradation1_bl) / 0.5); } .PageNavi .main>span:nth-child(3)::before { background-color: rgb(var(--pk) / 0.3); } .PageNavi .main>span:nth-child(4)::before { background-color: rgb(var(--gradation2_ygr) / 0.8); } .PageNavi .main>span:last-of-type { padding-left: calc(var(--clip_rate) * 1.5); } .PageNavi .main>span:last-of-type::before { background-color: transparent; } .PageNavi .main>span:last-of-type>span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } /* ------------------------------------------------------------------------------------------------------------ ページ送り */ .sort_navi { --border_color : var(--bl); font-size: 1.2em; } .sort_navi>* { background-color: rgb(var(--bl)); color: rgb(var(--w)); } /* border-width: 0; */ .sort_navi .active { --border_color : var(--y); background-color: rgb(var(--y) / 0.75); color: inherit; } .sort_navi .Btn { --arrow_weight : 3px; --arrow_color : rgb(var(--bl)); background-color: transparent; } /* background-color: rgb(var(--w)); */ /* ------------------------------------------------------------------------------------------------------------ */ .sideArea { --widget_w : 110px; --widget_scale : 0.5; --icon_size : calc((var(--widget_w) * var(--widget_scale)) * 0.7); color: rgb(var(--w)); top: 7em; right: calc(0em - (var(--widget_w) / 4)); } .sideArea::before { content: ""; display: block; position: absolute; left: 70%; top: 50%; translate: -50% -50%; width: calc(100% / 1.75); height: calc(100% + 3em); background-color: rgb(var(--bl)); filter: blur(1.5em); opacity: 0.5; } .sideArea>.Wrap { justify-items: center; gap: 0em; filter: drop-shadow(1px 1px 0.1em rgb(var(--bk) / 0.3)); } .sideArea .Item { font-size: 0.9em; display: grid; justify-content: center; justify-items: center; align-items: center; } /* font-weight: bold; */ .sideArea .Item>* { display: flex; justify-content: center; justify-content: end; justify-items: center; align-items: center; } /* aspect-ratio: 1; width: fit-content; width: max-content; width: min-content; */ .sideArea .rotate { rotate: 90deg; aspect-ratio: 1 / 0.25; } /* transform-origin: top center; */ /* ------------------------------------------------------ [250313]天気 ------------------------------------------------------ WeatherWidget.io https://weatherwidget.io/ ------------------------------------------------------ ※タテ並び　　　　→　110px(最低幅　これ以下は欠ける) ※ヨコ並びにする　→　316px以上 ------------------------------------------------------ */ .sideArea .temperature { } .sideArea .temperature .head { } .sideArea .temperature .data { } .sideArea .weatherwidget-io { width: var(--widget_w); scale: var(--widget_scale); filter: brightness(0) invert(1); } .sideArea .sunset { } .sideArea .sunset .head { } .sideArea .sunset .time { margin-top: 1.5em; } .sideArea .sunset .icon { top: 2.5em; width: var(--icon_size); margin-left: auto; margin-right: auto; } /* [本文以上でも、ヨコ長] */ @media screen and (max-height : calc(480px - 1px)) { .sideArea .rotate { aspect-ratio: initial; rotate: initial; display: grid; justify-content: center; line-height: 1.5; } .sideArea .Item>* { } .sideArea .temperature.Item>* { margin-bottom: -3em; } .sideArea .sunset .time { margin-top: 0; margin-bottom: -3em; }} /* ------------------------------------------------------------------------------------------------------------ [250117/250121]校正　上下節約の為、toggle小さくする ------------------------------------------------------------------------------------------------------------ */ /* pcも表示 */ .Drawer, .Drawer *::before, .Drawer *::after { --border_color : var(--bl); --bg_color : var(--w); } .Drawer { color: inherit; display: initial; } .Drawer .toggle { top: 0.25em; height: var(--drawer_toggle_size); } /* height: calc(var(--drawer_toggle_size) / 2); */ .Drawer .toggle .Btn { display: block; } .Drawer .toggle .Btn>span { position: absolute; left: 0%; height: initial; background-color: transparent; border-radius: 0; } .Drawer .toggle .Btn>.toggle1 { top: 0; } .Drawer .toggle .Btn>.toggle2 { top: 50%; translate: -0% -50%; } .Drawer .toggle .Btn>.toggle3 { bottom: 0; } #nav-input:checked ~ .toggle .Btn { filter: none; } #nav-input:checked ~ .toggle .Btn>.toggle1 { rotate: 35deg; } #nav-input:checked ~ .toggle .Btn>.toggle2 { } #nav-input:checked ~ .toggle .Btn>.toggle3 { rotate: -35deg; } #nav-content { top: calc(var(--logo_h) + (0.5em * 2)); padding-top: var(--padding); } .Drawer .List a:hover, .Drawer .Change .details input + .summary:hover { background-color: rgb(var(--bl) / 0.2); } .Drawer .List>.Wrap { display: inline-flex; } .Drawer .List>.Wrap>ul { grid-template-columns: repeat(3, 1fr); align-items: start; gap: var(--gap); } .Drawer .List>.Wrap>ul>li { border-width: 0px; border-width: 2px; border-style: solid; border-color: rgb(var(--border_color) / 1); border-radius: 0.5em; } .Drawer .Change .details input + .summary { padding-right: 1em; } /* width: 100%; */ .Drawer .List a:before { content: none; } .Drawer .List .content_list :where(a, .a) { padding: 1em; } .Drawer .List :where(a, .a) .title { display: grid; grid-template-areas: "arrow name" ; grid-template-columns: 1em 1fr; justify-content: start; align-items: center; gap: 0.5em; text-align: left; } .Drawer .List :where(a, .a) .title::before { grid-area: arrow; } .Drawer .List :where(a, .a) .title>.name { grid-area: name; } .Drawer .List :where(a, .a) .title::before { content: ""; display: inherit; } .Drawer .List a:not([target="_blank"]) .title::before { aspect-ratio: 1 / 1; width: 100%; border-radius: 100em; background-color: rgb(var(--bl)); mask-image: linear-gradient(#000, #000), var(--mask_arrow_line_r); mask-position: center; mask-repeat: no-repeat; mask-composite: exclude; } .Drawer .List a[target] .title::before { mask-size: 1em; } .Drawer .List :where(a, .a) .title>.name { display: flex; flex-wrap: wrap; } .Drawer .Change .Child { --border_color : var(--bk); background-color: rgb(var(--bg_color)); border-radius: 0 0 0.5em 0.5em; } .Drawer .Change .details .detail { width: 100%; margin: 0; } /* position: absolute; left: calc(50% + 1em); top: calc(100% - 0.5em); translate: -50% -0%; width: calc(100% + 2px - 1em); margin: 0; border-width: 2px; border-color: rgb(var(--border_color) / 0.3); border-radius: 0.5em; z-index: 10; */ .Drawer .Change .details input.switch:checked ~ label ~ .detail { } .Drawer .List .Child :where(a, .a) { padding-left: 0.5em; display: block; } /* .Drawer :is(a, .a) .Img { display: none; opacity: 0; } */ .Drawer .Change .MenuOn .details input.switch:checked ~ .summary .Btn>*:after { transform: none; rotate: 0deg; } .Drawer .List .Child :where(a, .a) .title { } .Drawer .List .Child :where(a, .a) .title::before { content: none; } .Drawer .List .Child :where(a, .a)[target] .title::before { content: ""; } .Drawer .List .ClassCategory .Child :where(a, .a) { padding-left: 0.5em; display: grid; align-items: center; grid-template-columns: 2em 1fr; gap: 0.5em; } .Drawer .List .ClassCategory .Child :where(a, .a) .title { display: block; } .Drawer .List .ClassCategory .Child :where(a, .a) .Img { display: block; opacity: 1.0; } .Drawer .Ex { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); } /* display: grid; grid-template-columns: repeat(4, auto); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); margin-left: 20%; margin-right: 20%; */ .Drawer .Ex>* { } /* 個別　ドローン申請フォーム */ .Drawer .ClassRequest :is(.summary, .Child) { display: none; opacity: 0; } .Drawer .Ex a * { font-family: inherit; font-weight: inherit; font-size: inherit; } /* ------------------------------------------------------ 今のページ */ .Drawer .List .MenuOn { background-color: rgb(var(--bl) / 0.2); } .Drawer .List .child_MenuOn, .Drawer .List .MenuOn .Child .child_MenuOn { background-color: rgb(var(--y) / 1); } /* ------------------------------------------------------ 個別 */ /* [250408-1015]修正　『おすすめスポット』だけ、ボタン全面 */ .Drawer .Change .ClassCategory .details input + .summary { width: 100%; } /* ------------------------------------------------------------------------------------------------------------
      */ .Footer { --border_color : var(--w); --footer_bg_h : 32.5svw; padding-top: var(--padding_tb); background-image: url(../img/pixta_78363702_M.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: cover; } /* [250130-0920/250203]校正　bg画像の上が切れる　→　250128-1610で奥付用にbg画像大きくするのはこっちだった --footer_bg_h : 20svw; overflow: hidden; */ .Footer::before { aspect-ratio: 2810 / 292; content: ""; display: block; position: absolute; left: 50%; bottom: 0; translate: -50% -0%; width: 100%; height: var(--footer_bg_h); background-image: url(../img/footer_bg.png); background-position: left 45% bottom; background-repeat: repeat-x; background-size: cover; } /* [250130-0920/250203]校正　bg画像の上が切れる　→　250128-1610で奥付用にbg画像大きくしたらはみ出た height: var(--footer_bg_h); background-size: 260em; [250128-1610]校正　奥付をどうしても左下にしたい background-position: center bottom; background-size: 150vw; [250128-0955]校正　奥付レイアウト変更・・・footerのイラスト大きくする background-size: contain; */ .Footer>.Wrap { display: grid; gap: var(--gap); } /* [250128-1610]校正　奥付をどうしても左下にしたい gap: calc(var(--gap) * 1.5); .Footer>.Wrap { display: grid; grid-template-areas: "Info Info" "Navi Copy" ; justify-content: center; gap: var(--gap); } .Footer>.Wrap>.Info { grid-area: Info; } .Footer>.Wrap>.Navi { grid-area: Navi; } .Footer>.Wrap>.Copy { grid-area: Copy; } */ .Footer ul { } .Footer li { margin-top: 0; margin-bottom: 0; } .Footer>.Wrap>* { background-color: transparent; border-width: 0; color: inherit; } .Footer .Info { color: rgb(var(--w)); padding-top: 0; padding-bottom: 0; text-align: center; } /* [250128-0955]校正　(c)は中心がいい padding-bottom: calc(var(--footer_bg_h) / 2); [250117/250122]校正　
      事務局、観光案内所の　〒・住所・営業時間・電話番号を明記した分、調整 padding-bottom: calc(var(--footer_bg_h) - 3em); */ .Footer .Info>.Wrap { grid-template-areas: "menu" "sns" ; justify-content: initial; gap: var(--gap); width: 100%; } /* [250128-0955]校正　(c)は中心がいい gap: calc(var(--gap) * 1.5); */ .Footer .Info .menu { display: grid; gap: var(--gap); } .Footer .Info .menu .footer_btn { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--gap) / 2); } .Footer .Info .menu .footer_btn>li { width: calc( ( 100% - ( (var(--gap) / 1.9) * 2 ) ) / 3 ); margin: 0; } .Footer .Info .menu .footer_btn>li>.Wrap { height: 100%; } .Footer .Info .menu .footer_btn :is(a, .a) { height: 4em; padding: 0 calc(2em * 2); } /* [250117/250121]校正　上下節約 aspect-ratio: 409 / 113; */ .Footer .Info .menu .footer_btn .icon { position: absolute; left: 1em; top: 50%; translate: -0% -50%; width: 2em; } .Footer .Info .menu .footer_btn :is(a, .a) .title_set { line-height: 1.5; } /* font-size: 0.9em; */ .Footer .Info .menu .footer_btn :is(a, .a) .name { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; } .Footer .Info .menu .footer_small { display: flex; flex-wrap: wrap; justify-content: space-between; justify-content: center; justify-content: space-around; gap: calc(var(--gap) * 1); } /* [250310-0920/250312]校正　bg薄い黒入れて、タテ線やめる gap: calc(var(--gap) * 1.5); [250128-0955]校正　.GlobalMenu.footer_btn　と　幅合わせる justify-content: center; */ /* [250310-0920/250312]校正　bg薄い黒入れて、タテ線やめる */ .Footer .Info .menu .footer_small a { display: block; background-color: rgb(var(--bk) / 0.05); padding: 0.5em; filter: drop-shadow(0 0 0.25em rgb(var(--bk) / 0.25)); } /* [250130-0920/250203]校正　bgの青要らない※海と被って文字が見えなくなってもOK background-color: rgb(var(--bl) / 0.7); padding: 0.25em; */ /* [250310-0920/250312]校正　bg薄い黒入れて、タテ線やめる .Footer .Info .menu .footer_small>li:not(:last-of-type)::after { content: ""; display: block; position: absolute; left: calc(100% + ((var(--gap) * 1.5) / 2)); top: 50%; translate: -0% -50%; width: 0; height: 1em; border-left-width: 1px; text-align: center; } */ .Footer .Info .sns { display: inline-block; } .Footer .Info .sns>ul { display: grid; grid-template-columns: repeat(4, calc(180px * 1.2)); justify-content: center; align-items: center; gap: calc(var(--gap) / 2); } /* [250310-0920/250312]校正　スポンサーバナー大きく grid-template-columns: repeat(4, 180px); */ .Footer .Info .sns a { display: block; padding: 0; } .Footer .Info .sns img { object-fit: contain; width: 100%; } /* [250310-0920/250312]校正　『ウインドシティホテル』追加したら、縦横比が違う aspect-ratio: 180 / 45; object-fit: contain; width: 100%; background-color: rgb(var(--w)); */ /* [250314]校正　スポンサーバナー　縦横比崩れてもいいから、全部同じ面積にする */ .Footer .Info .sns .sponsor { } .Footer .Info .sns .sponsor img { aspect-ratio: 180 / 45; object-fit: initial; } /* [250117/250122]校正　
      事務局、観光案内所の　〒・住所・営業時間・電話番号を明記する */ .Footer .Copy, .Footer .Navi { } /* [250128-0955]校正　(c)は中心がいい padding-bottom: calc(var(--gap) / 2); [250122-1514]重くなる .Footer .Copy { --drop_shadow_color : 203 255 255; --drop_shadow_blur : 0.05em; --drop_shadow_outline : 0px; --drop_shadow_outline_minus : calc(0em - var(--drop_shadow_outline)); filter: drop-shadow(var(--drop_shadow_outline_minus) var(--drop_shadow_outline_minus) var(--drop_shadow_blur) rgb(var(--drop_shadow_color) / 0.5)) drop-shadow(var(--drop_shadow_outline_minus) var(--drop_shadow_outline) var(--drop_shadow_blur) rgb(var(--drop_shadow_color) / 0.5)) drop-shadow(var(--drop_shadow_outline) var(--drop_shadow_outline_minus) var(--drop_shadow_blur) rgb(var(--drop_shadow_color) / 0.5)) drop-shadow(var(--drop_shadow_outline) var(--drop_shadow_outline) var(--drop_shadow_blur) rgb(var(--drop_shadow_color) / 0.5)) drop-shadow(var(--drop_shadow_outline_minus) var(--drop_shadow_outline_minus) var(--drop_shadow_blur) rgb(var(--drop_shadow_color))) drop-shadow(var(--drop_shadow_outline_minus) var(--drop_shadow_outline) var(--drop_shadow_blur) rgb(var(--drop_shadow_color))) drop-shadow(var(--drop_shadow_outline) var(--drop_shadow_outline_minus) var(--drop_shadow_blur) rgb(var(--drop_shadow_color))) drop-shadow(var(--drop_shadow_outline) var(--drop_shadow_outline) var(--drop_shadow_blur) rgb(var(--drop_shadow_color))) ; } .Footer .Navi .data:not(.tilte) { --drop_shadow_color : 203 255 255; --drop_shadow_blur : 0.05em; --drop_shadow_outline : 1px; --drop_shadow_outline_minus : calc(0em - var(--drop_shadow_outline)); filter: drop-shadow(var(--drop_shadow_outline_minus) var(--drop_shadow_outline_minus) var(--drop_shadow_blur) rgb(var(--drop_shadow_color))) drop-shadow(var(--drop_shadow_outline_minus) var(--drop_shadow_outline) var(--drop_shadow_blur) rgb(var(--drop_shadow_color))) drop-shadow(var(--drop_shadow_outline) var(--drop_shadow_outline_minus) var(--drop_shadow_blur) rgb(var(--drop_shadow_color))) drop-shadow(var(--drop_shadow_outline) var(--drop_shadow_outline) var(--drop_shadow_blur) rgb(var(--drop_shadow_color))) drop-shadow(var(--drop_shadow_outline_minus) var(--drop_shadow_outline_minus) var(--drop_shadow_blur) rgb(var(--drop_shadow_color))) drop-shadow(var(--drop_shadow_outline_minus) var(--drop_shadow_outline) var(--drop_shadow_blur) rgb(var(--drop_shadow_color))) drop-shadow(var(--drop_shadow_outline) var(--drop_shadow_outline_minus) var(--drop_shadow_blur) rgb(var(--drop_shadow_color))) drop-shadow(var(--drop_shadow_outline) var(--drop_shadow_outline) var(--drop_shadow_blur) rgb(var(--drop_shadow_color))) ; } */ .Footer .Navi { --border_color : var(--footer_bl) / 0.25; --border_color : var(--w) / 0.1; font-size: 0.95em; text-align: left; line-height: 1.75; display: grid; grid-template-columns: repeat(2, auto); justify-content: center; align-content: center; gap: calc(var(--gap) / 2); margin-top: var(--padding_tb); margin-bottom: calc(0em - (var(--gap) / 2)); } /* [250130-0920/250203]校正　bg黒+白文字で左右中心にする display: grid; grid-template-columns: repeat(2, auto); align-content: center; gap: calc(var(--gap) / 2); margin-top: var(--padding_tb); margin-left: 0; margin-right: auto; margin-bottom: calc(0em - (var(--gap) / 2)); [250128-1610]校正　奥付をどうしても左下にしたい justify-content: center; */ /* [250214-1010]校正　bgナシ+黒文字にする [250130-0920/250203]校正　bg黒+白文字で左右中心にする */ .Footer .Navi>* { padding: 0.5em 0.75em; background-color: rgb(var(--bl) / 0.95); background-color: rgb(var(--bk) / 0.8);/* 黒? */ color: rgb(var(--w)); background-color: rgb(var(--w) / 0); color: rgb(var(--bk)); } .Footer .Navi .data.tilte { font-weight: bold; } /* [250130-0920/250203]校正　bg黒+白文字で左右中心にする .Footer .Navi>.Wrap>*>*>*, .Footer .Navi .data.tilte { background-color: rgb(var(--footer_bl) / 0.8); padding-left: 0.25em; padding-right: 0.25em; } .Footer .Navi .data.tilte { display: inline-block; } */ .Footer .Navi .data:not(.tilte) { font-size: 0.9em; } /* [250128-1610]校正　奥付をどうしても左下にしたい .Footer .Navi>.Wrap { padding: calc(var(--gap) / 2) calc(var(--gap) / 2); background-color: rgb(var(--bl) / 0.95); color: rgb(var(--w)); border-width: 1px; } .Footer .Navi .data.tilte { --data_title_h : 2.5em; font-weight: bold; text-align: center; line-height: 0; position: absolute; left: 50%; bottom: calc(100% - (var(--data_title_h) / 2)); translate: -50% -0%; display: grid; align-items: center; width: calc(100% - 5em); width: 10em; height: var(--data_title_h); padding: 0em 1em; background-color: rgb(var(--bl)); color: rgb(var(--w)); border-width: 1px; border-radius: 100em; filter: brightness(105%); } [250128-0955]校正　(c)は中心がいい justify-content: start; .Footer .Navi>.Wrap { display: grid; gap: 0 var(--gap); } / background-color: rgb(var(--bl) / 0.95); color: rgb(var(--w)); padding: 1em; / .Footer .Navi .data.tilte { font-weight: bold; margin-bottom: 0.5em; padding-left: 0.5em; padding-right: 0.5em; background-color: rgb(var(--bl) / 0.8); color: rgb(var(--w)); } .Footer .Navi .data:not(.tilte) { font-size: 0.9em; background-color: rgb(var(--footer_bl)); padding-right: 0.5em; } */ .Footer .Navi>.Wrap>* { display: flex; gap: 0 var(--gap); } .Footer .Navi>.Wrap>*>* { display: flex; gap: 0 1em; } .Footer .Navi .data.address { } /* [250408-1015]修正　[sp] 観光案内所の住所を『道の駅』の帰依で折り返したい */ .Footer .Navi .kanko_annaisyo .data.address .Address { display: flex; flex-wrap: wrap; gap: 0 1em; } .Footer .Navi .data.fax { display: none; } .Footer .Copy { padding-top: 0; padding-bottom: calc(var(--gap) / 2); font-size: inherit; } /* [250128-0955]校正　(c)は中心がいい position: absolute; right: var(--gap); bottom: 0; */ /* [241127-1100]　日本語
      英語にする */ .Footer .Copy * { font-weight: inherit; } .Footer .Copy a { display: flex; justify-content: center; align-items: center; gap: calc(var(--gap) / 6); line-height: 1.5; } .Footer .Copy * { font-weight: inherit; } .Footer .Copy a>* { display: flex; flex-direction: column; justify-content: start; align-items: start; gap: 0.5em; line-height: 1; } .Footer .Copy a>*:first-child { background-color: rgb(var(--footer_bl)); padding: 0 0.25em 0.25em; border-radius: 100em; } .Footer .Copy a>*:last-child>* { background-color: rgb(var(--footer_bl)); padding: 0 0.25em 0.25em; } .Footer .Copy a em { font-size: 0.7em; } /* ------------------------------------------------------------------------------------------------------------ メールフォーム */ .form { display: grid; gap: var(--gap); } .form table .list { grid-template-columns: repeat(2, 1fr); } /* その他 */ .form table .list :is(.hoka, .hoka_box) { grid-column: span 2; } .form table .list .hoka_box { display: grid; grid-template-columns: 1em 1fr 1em; align-items: center; gap: 0.5em; } /* 日付選択 */ .form table .day_box { display: flex; align-items: center; gap: var(--gap); } /* ------------------------------------------------------------------------------------------------------------ */ .Gallery { --slick_arrow_w : 2.5em; --slick_arrow_weight : 2px; --gallery_dot_w : 3.5em; --gallery_dot_num : 8; } .Gallery.Slider { } /* aspect-ratio: 16 / 9; */ .Gallery.Slider .Item { } .Gallery.Slider { text-align: left; line-height: 1.5; } .Gallery.Slider>.Wrap { padding: calc(var(--padding_tb) / 1.5); } :is(#Index, #FurusatoNouzei) .Gallery.Slider .slider { grid-template-columns: 1fr auto 1fr; } /* grid-template-columns: 1fr calc((var(--gallery_dot_w) * var(--gallery_dot_num)) + (var(--gap) * (var(--gallery_dot_num) - 1))) 1fr; [250415-0925]　index・イベントのスライダーを8つにした grid-template-columns: 1fr calc((var(--gallery_dot_w) * 4) + (var(--gap) * 3)) 1fr; */ .Gallery.Slider :is(a, .a) { display: grid; gap: 1em; text-decoration-line: none; } .Gallery.Slider a[target] { } .Gallery.Slider a[target]>* { grid-template-columns: 1fr; } .Gallery.Slider a[target]>*::before { aspect-ratio: 1; position: absolute; width: 0; overflow: hidden; } .Gallery.Slider .data { display: grid; gap: 0.5em; } .Gallery.Slider .title { margin: 0; } .Gallery.Slider .Time { display: grid; grid-template-areas: "b dates" ; justify-content: start; gap: 1em; } .Gallery.Slider .Time>b { grid-area: b; font-weight: inherit; } .Gallery.Slider .Time>.dates { grid-area: dates; } .Gallery.Slider img { aspect-ratio: 400 / 533; } /* object-fit: contain; */ /* dot */ .Gallery.Slider .slick-dots { } .Gallery.Slider .slick-dots>* { height: 3px; } .Gallery.Slider .slick-dots li button::before { height: 100%; border-radius: 0; opacity: 1.0; background-color: rgb(var(--w)); } .Gallery.Slider .slick-dots li.slick-active button:before { opacity: 1.0; background-color: rgb(var(--bl)); } /* arrow */ .Gallery.Slider .slick-arrow { background-color: rgb(var(--bl)); } /* top: calc(100% + 2em); translate: -0% -50%; */ .Gallery.Slider .slick-arrow:after { background-color: rgb(var(--w)); } /* .Gallery.Slider .slick-prev { left: calc( ( 100% - ( (var(--gallery_dot_w) * 4) + (var(--gap) * 4) + (var(--gallery_dot_w) * 2) ) ) / 2 ); } .Gallery.Slider .slick-next { right: calc( ( 100% - ( (var(--gallery_dot_w) * 4) + (var(--gap) * 4) + (var(--gallery_dot_w) * 2) ) ) / 2 ); } */ /* ------------------------------------------------------------------------------------------------------------ お知らせ */ .News { --news_list_time_w : initial; --news_ct_icon_w : 7em; } .News .List { } .News .List>ul { gap: calc(var(--gap) / 1); } .News .List a { text-decoration-line: none; } .News .List .data { display: grid; grid-template-areas: "day ct_icon title" ; grid-template-columns: 5.5em var(--news_ct_icon_w) 1fr; align-items: start; gap: 1em; } .News .List .data .list_main { grid-area: title; } .News .List .data .title { grid-area: unset; margin-bottom: 0 !important; } .News .ct_icon { width: var(--news_ct_icon_w); color: rgb(var(--w)); text-align: center; } .News .ct_icon::before { content: ""; display: block; position: absolute; left: 50%; top: calc(50% + 0.125em); translate: -50% -50%; width: 100%; height: calc(100% - 0.25em); background-color: rgb(var(--bl)); } .News .ct_icon>b { font-size: 0.9em; font-weight: inherit; } /* [250310-0920/250311]校正　「重要」アイコンは、『重要なお知らせ』の

      の色で */ .News .important .ct_icon::before { background-color: rgb(var(--pk)); } /* [250430-1509[/250509]追加　「ブログ」アイコンは、緑系の色で */ .News .blog .ct_icon::before { background-color: rgb(var(--gradation2_gr)); } /* [250917-1125]追加　「会員の皆様へ」アイコンは、薄いむらさき(ラベンダー？)色で */ .News .customer .ct_icon { color: inherit; } .News .customer .ct_icon::before { background-color: rgb(166 166 255); background-color: rgb(186 186 255); } .News.NewsDetail .ct_icon { font-size: inherit; font-weight: normal; line-height: var(--line_height); } .News.NewsDetail .ct_icon>b { font-weight: inherit; } :is(.News, .news_icon) .NewMark { --bg_color : var(--or) / 0.95; font-size: 0.75em; letter-spacing: 0.05em; position: absolute; left: 0; top: initial; right: initial; bottom: 100%; translate: none; width: 4.5em; padding: 0.5em 0; background-color: rgb(var(--bg_color)); color: rgb(var(--w)); border-radius: 100em; text-align: center; } :is(.News, .news_icon) .NewMark::after { content: ""; display: block; position: absolute; left: 50%; top: calc(100% - 2px); translate: -50% -0%; aspect-ratio: 1 / cos(30deg); width: 0.75em; background-color: rgb(var(--bg_color)); clip-path: polygon( 0 0, 50% 100%, 100% 0 ); } .News .List .NewMark { top: initial; left: 0; right: initial; bottom: calc(100% - 1em); } .News.NewsDetail .NewMark { font-size: calc(var(--font) * 0.8); bottom: calc(100% + 0.5em); } /* top: initial; left: 10em; right: initial; bottom: calc(100% + 1em); */ .News .List .title { font-family: inherit; font-weight: inherit; } .News .List .title>b { font-family: inherit; font-weight: inherit; } #Index .Index .News { } #Index .Index .News .body { display: grid; gap: var(--gap); } #Index .Index .News .body .main { margin-left: auto; margin-right: auto; } #Index .Index .News .body .main .List>ul { gap: 1.5em; } /* 行数制限　1行 */ #Index .Index .News .body .title>b { text-align: inherit; font-size: inherit; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } #Index .Index .News .body .footer { display: flex; justify-content: center; gap: calc(var(--gap) / 2); } /* [250117/250121]校正　構成変更 #Index .Index .News .body { display: flex; justify-content: center; align-items: end; gap: var(--gap); } #Index .Index .News .body .main { grid-area: main; } #Index .Index .News .body .footer { grid-area: footer; } #Index .Index .News .body .main { max-width: 47.3em; } #Index .Index .News .body .footer { margin-top: 0; display: grid; gap: calc(var(--gap) / 2); } */ /* ------------------------------------------------------ [news]　list */ #News .NewsNewsList form { display: grid; justify-content: center; gap: var(--padding_tb); } /* ------------------------------------------------------ [news]　detail */ .NewsDetail .detail { display: grid; gap: var(--padding_tb); } .NewsDetail .detail h2.title { display: inline-grid; justify-content: center; justify-items: center; margin-bottom: 0 !important; } .NewsDetail .title>b { filter: none; } .NewsDetail .title>b>span:not(.NewMark) { filter: grayscale(80%) contrast(200%); } .NewsDetail article>.Wrap { gap: var(--gap); } #News .NewsDetail article .head { } /* margin-bottom: calc(0em - (var(--padding_tb) * 2)); */ #News .NewsDetail article .main { display: block; background-color: rgb(var(--w)); padding: var(--gap); } #News .NewsDetail article .main>* { margin: 0; } /* [250321-1538]　『イベント』detail、『お知らせ』detail　文字大きく */ #News .NewsDetail article .main>.Wrap { font-size: 1.2em; } .NewsDetail .footer { display: grid; grid-template-areas: "Prev Next" "Back Back" ; grid-template-columns: repeat(2, 1fr); justify-content: space-between; align-items: center; gap: var(--gap); } .NewsDetail .footer>.Prev { grid-area: Prev; } .NewsDetail .footer>.Next { grid-area: Next; } .NewsDetail .footer>.Back { grid-area: Back; } .NewsDetail .footer a { display: flex; align-items: center; gap: 1em; text-decoration-line: none; } .NewsDetail .footer>*::after { grid-area: arrow; position: relative; left: initial; top: initial; right: initial; bottom: initial; translate: none; transform: none; } .NewsDetail .footer>* .title { grid-area: title; } .NewsDetail .footer>* { width: auto; min-width: initial; padding: 0; background-color: transparent; border-width: 0; } /* */ .NewsDetail .footer>:is(.Prev, .Next) { padding: calc(var(--gap) / 2); background-color: rgb(var(--bl) / 0.15); border-radius: 1em; } .NewsDetail .footer>.Prev { display: grid; grid-template-areas: "arrow title" ; justify-content: start; } /* justify-self: start; */ .NewsDetail .footer>.Prev::after { rotate: 180deg; } .NewsDetail .footer>.Next { display: grid; grid-template-areas: "title arrow" ; justify-content: end; } /* justify-self: end; */ .NewsDetail .footer>.Back { justify-self: center; } .NewsDetail .footer>.Back::after, .NewsDetail .footer>.Back>*::after { content: none; } .NewsDetail .footer>.Back>* { justify-content: center; padding-left: 0; padding-right: 0; } /* ============================================================================================================ 引継ぎ記事内のtag ============================================================================================================ */ :is( .spotdata-body #free, .NewsDetail .main ) a:is( [href*="http"], [href*=".pdf"], [href*=".doc"], [href*=".xls"], [href*=".png"], [href*=".jpg"], [href*=".gif"] ), :is( .spotdata-body #free, .NewsDetail .main ) a:is( [href*="http"], [href*=".pdf"], [href*=".doc"], [href*=".xls"], [href*=".png"], [href*=".jpg"], [href*=".gif"] ) :is(span, b, em, font, strong, img) { display: inline; } :is( .spotdata-body #free, .NewsDetail .main ) a:is( [href*="http"], [href*=".pdf"], [href*=".doc"], [href*=".xls"], [href*=".png"], [href*=".jpg"], [href*=".gif"] ) :is(div, p) { display: block; } :is( .spotdata-body #free, .NewsDetail .main ) a:is( [href*="http"], [href*=".pdf"], [href*=".doc"], [href*=".xls"], [href*=".png"], [href*=".jpg"], [href*=".gif"] )>*::before { content: none; } :is(.spotdata-body #free, .NewsDetail .main) dl { display: block; } :is(.spotdata-body #free, .NewsDetail .main) dt { padding: 0; font-size: inherit; font-weight: bold; } :is(.spotdata-body #free, .NewsDetail .main) dt::before { content: none; } :is(.spotdata-body #free, .NewsDetail .main) dd { margin-top: 0; } /* ============================================================================================================ 地図 ------------------------------------------------------------------------------------------------------------ */ .Map { width: 90svw; } /* ------------------------------------------------------ [250314-1142]校正・追加 マイマップ ------------------------------------------------------*/ :is(.my_map, .map_view) { } :is(.my_map, .map_view) iframe { aspect-ratio: 16 / 10; } /* [ヨコ長] */ @media screen and (orientation: landscape) { :is(.my_map, .map_view) iframe { max-height: 70vh; } } /* ============================================================================================================ アクセス access.php ------------------------------------------------------------------------------------------------------------ */ .Access .Ct1 .head { z-index: 5; } .Access .Ct1 .map_bg { } .Access .Ct1 .Img[class*="map_"] img { width: 100%; } .Access .Ct1 .map_bg { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 0; } /* */ .Access .Ct1 .map_bg .Gallery { margin: 0; } .Access .Ct1 .map_bg .Caption { font-size: inherit; position: absolute; line-height: 0; } .Access .Ct1 .map_bg>*::after { aspect-ratio: 1 / 1; content: ""; display: block; position: absolute; border-width: 3px; border-color: rgb(var(--r2)); border-radius: 100em; } .Access .Ct1 .map_japan { position: absolute; left: -55%; bottom: -26.5em; width: 150%; } .Access .Ct1 .map_japan:after { position: absolute; left: 44%; bottom: 25.5%; width: 6.5%; } .Access .Ct1 .map_japan .Item2 { position: absolute; left: 42%; top: 76%; width: 5em; } .Access .Ct1 .map_japan .Item2 img { rotate: 30deg; scale: -1 1; filter: invert(50%); } .Access .Ct1 .map_aichi { position: absolute; top: 10em; left: 14%; width: 27%; } .Access .Ct1 .map_aichi::after { position: absolute; bottom: -14%; left: 23%; width: 40%; } .Access .Ct1 .map_aichi .Caption { top: 50%; left: 50%; translate: -50% -50%; } .Access .Ct1 .map_tahara { aspect-ratio: 1 / 1; position: absolute; top: 5em; right: -15%; width: 68%; margin-left: auto; margin-right: 0; border-radius: 100em; background-color: rgb(var(--gradation1_bl) / 0.1); border-width: 3px; border-color: rgb(var(--w) / 0.75); overflow: hidden; } /* mask-image: linear-gradient(#000, #000), var(--mask_arrow_line_r); mask-repeat: no-repeat; mask-composite: exclude; */ .Access .Ct1 .map_tahara>ul { aspect-ratio: 1 / 1; position: absolute; top: 0; left: 0; width: 100%; } .Access .Ct1 .map_tahara .Item3 { position: absolute; bottom: 18%; left: -40%; width: 200%; } .Access .Ct1 .map_tahara .Item3 .Caption { font-size: 1.5em; left: 36%; bottom: 12%; padding: 1em 0.75em; background-color: rgb(var(--w) / 0.9); border-radius: 100em; } .Access .Ct1 .map_tahara .Item4 { position: absolute; right: 3%; bottom: 47%; width: 10em; } .Access .Ct1 .map_tahara .Item4 .Caption { left: 50%; translate: -50% -0%; background-color: transparent; } .Access .Ct1 .main { display: grid; justify-content: center; gap: var(--gap); z-index: 5; } .Access .Ct1 .main h3 { margin: auto !important; line-height: 0; } .Access .Ct1 .main h3::before { content: none; } .Access .Ct1 .main h3>b { font-weight: inherit; font-size: 3em; color: inherit; } /* ------------------------------------------------------ [アクセス](access.php) 道案内 */ .Access .guide .NaviBtnL { --num : 4; max-width: var(--max_width); margin-left: auto; margin-right: auto; } .Access .guide .NaviBtnL .Item { /* [241202]? aspect-ratio: 1 / 1; */ } .Access .Ct2 .NaviBtnL :is(.ID_car, .ID_anything) { } .Access .Ct2 .NaviBtnL :is(.ID_car, .ID_anything) img { position: absolute; top: -1em; left: 50%; translate: -50% -0%; width: calc(var(--icon_size) * 1.5); } /* .Access .Ct2 .NaviBtn :is(.ID_car, .ID_anything) img { width: calc(var(--icon_size) * 1.5); } */ .Access .guide .navi_main { display: grid; gap: var(--padding_tb); margin-top: var(--padding_tb); } .Access .guide .navi_main h3 { } .Access .guide .navi_main>.Item { --route_color : var(--y); display: grid; gap: calc(var(--padding_tb) / 2); } .Access .guide .navi_main .item_title { display: grid; justify-content: center; justify-items: center; align-items: center; gap: 0; margin: 0; } .Access .guide .navi_main .item_title .icon { display: flex; gap: calc(var(--gap) / 3); margin: 0; } .Access .guide .navi_main .item_title .icon img { width: 5em; } .Access .guide .navi_main .item_title>b { display: flex; flex-wrap: wrap; align-items: baseline; } .Access .guide .navi_main .item_title>b>span:last-of-type { font-size: 0.8em; } .Access .guide .navi_main h4 { background-color: rgb(var(--route_color)); } .Access .guide .navi_main h4>b { display: inline-block; } /* display: flex; justify-content: center; align-items: center; gap: calc(var(--gap) / 3); */ .Access .guide .navi_main h4>b>b { font-weight: inherit; } .Access .guide .navi_main h4 .icon { position: absolute; top: 50%; right: calc(100% + 1em); translate: -0% -50%; width: 100%; display: flex; justify-content: end; align-items: center; gap: calc(var(--gap) / 6); line-height: 0; } /* position: absolute; top: 50%; right: calc(100% + 1em); translate: -0% -50%; width: 100%; justify-content: end; */ .Access .guide .navi_main h4 .icon>* { display: inherit; } .Access .guide .navi_main h4 .icon img { aspect-ratio: 1 / 1; width: 3em; padding: 0.25em; background-color: rgb(var(--w) / 0.95); border-width: 2px; border-color: rgb(var(--route_color)); border-radius: 100em; } .Access .guide .navi_main .route { display: grid; gap: calc(var(--gap) / 3); } /* text-align: justify; */ .Access .guide .navi_main .route>.Wrap { display: grid; grid-template-columns: repeat(3, 7em 1fr); align-items: center; gap: var(--gap) 0; } /* text-align: justify; grid-template-columns: 7em 1fr 7em 1fr 7em 1fr; display: flex; flex-wrap: wrap; */ .Access .guide .navi_main .route .data { text-align: center; } /* display: grid; grid-template-columns: 7em 1fr; align-items: center; display: flex; gap: var(--gap); */ .Access .guide .navi_main .route .data.point { aspect-ratio: 1 / 1; display: flex; justify-content: center; align-items: center; background-color: rgb(var(--route_color) / 0.5); } /* background-color: rgb(var(--w)); width: 7em; height: 100%; padding: 1em 0; */ .Access .guide .navi_main .route .data.guide { } /* --line_height : 2.5em; min-height: calc((1em * var(--line_height)) * 2); min-height: calc((var(--line_height) / 1.5) + var(--line_height)); */ .Access .guide .navi_main .route .data.guide:not(:last-of-type)::before { --arrow_size : 1em; --arrow_weight : 2px; --arrow_angle : calc(var(--arrow_size) / 2); content: ""; display: block; position: absolute; top: 50%; left: 0; translate: -0% -50%; width: 100%; height: 1em; background-color: rgb(var(--bk) / 0.5); clip-path: polygon( calc(100% - (var(--arrow_angle) + var(--arrow_weight))) 0, calc(100% - var(--arrow_angle)) 0, 100% 50%, calc(100% - var(--arrow_angle)) 100%, calc(100% - (var(--arrow_angle) + var(--arrow_weight))) 100%, calc(100% - (var(--arrow_weight) * 1.5)) calc(50% + (var(--arrow_weight) / 2)), 0 calc(50% + (var(--arrow_weight) / 2)), 0% calc(50% - (var(--arrow_weight) / 2)), calc(100% - (var(--arrow_weight) * 1.5)) calc(50% - (var(--arrow_weight) / 2)) ); } .Access .guide .navi_main .route .data.guide>* { line-height: 2.5; display: inline-block; min-height: calc((1em * 2.5) * 2); padding-left: 0.25em; padding-right: 0.25em; text-align: right; } /* [アクセス](access.php) 道案内　スタート */ .Access .guide .navi_main .route .data.start { font-weight: bold; } /* background-color: rgb(var(--y)); background-color: rgb(var(--gr) / 0.5); font-size: 1.2em; */ /* [アクセス](access.php) 道案内　I.C */ .Access .guide .navi_main .route .data.ic { border-radius: 100em; background-color: rgb(var(--w) / 0.5); border-width: 1px; border-color: rgb(var(--bk) / 0.3); } /* */ /* [アクセス](access.php) 道案内　ゴール */ .Access .guide .navi_main .route .data.goal { font-size: 1.2em; font-weight: bold; border-width: 2px; border-color: rgb(var(--bk) / 0.15); background-color: rgb(var(--route_color)); } /* background-color: rgb(var(--y)); background-color: rgb(var(--bl)); color: rgb(var(--w)); */ .Access .guide .navi_main .route .data.goal:after { aspect-ratio: 1 / 1; content: ""; display: block; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: calc(100% - 0em); border-width: 2px; border-color: rgb(var(--w)); } /* [250117/250122]校正・追加　末尾にメモ */ .Access .guide .navi_main .route .memo { margin: 0; text-align: right; } /* [アクセス](access.php) 道案内・個別　「お車をご利用の場合」 */ .Access .guide .navi_main>.Item[class*="car"] { --route_color : var(--y); } /* [250117/250122]校正・追加　豊橋まで23号のみ(120分) [アクセス](access.php) 道案内・個別　「お車をご利用の場合」　大阪・名古屋方面から */ /* start　大阪、名古屋 */ .Access .guide .navi_main>.Item[class*="car"] .route.oosaka .data_ID_1 { order: 1; grid-row: span 2; aspect-ratio: 1 / 2; } /* grid-row: 1 / 3; aspect-ratio: initial; height: 100%; */ .Access .guide .navi_main>.Item[class*="car"] .route.oosaka .data_ID_2 { order: 2; } /* 豊橋まで23号のみ(120分) */ .Access .guide .navi_main>.Item[class*="car"] .route.oosaka .data_ID_2_5 { order: 7; grid-column: span 3; } /* grid-column: 2 / 5; */ .Access .guide .navi_main>.Item[class*="car"] .route.oosaka .data_ID_3 { order: 3; } .Access .guide .navi_main>.Item[class*="car"] .route.oosaka .data_ID_4 { order: 4; } .Access .guide .navi_main>.Item[class*="car"] .route.oosaka .data_ID_5 { order: 5; } .Access .guide .navi_main>.Item[class*="car"] .route.oosaka .data_ID_6 { } /* 豊橋 */ .Access .guide .navi_main>.Item[class*="car"] .route.oosaka .data_ID_7 { order: 5; grid-row: span 2; aspect-ratio: 1 / 2; } /* grid-column: 5 / 6; grid-row: 1 / 3; aspect-ratio: initial; height: 100%; */ /* 259号線　約30分、42号線　約30分 */ .Access .guide .navi_main>.Item[class*="car"] .route.oosaka .data_ID_8 { order: 6; grid-row: span 2; } /* grid-column: 6 / 7; grid-row: 1 / 3; */ .Access .guide .navi_main>.Item[class*="car"] .route.oosaka .data_ID_9 { order: 9; } .Access .guide .navi_main>.Item[class*="car"] .route.oosaka .data_ID_10 { order: 10; } .Access .guide .navi_main>.Item[class*="car"] .route.oosaka .data_ID_11 { order: 11; } /* [アクセス](access.php) 道案内・個別　「お車をご利用の場合」 */ .Access .guide .navi_main>.Item[class*="public_transportation"] { --route_color : var(--gradation1_bl); } /* [アクセス](access.php) リンク */ .Access .guide .navi_main .link_main { } /* display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: var(--gap); margin-top: var(--gap); */ .Access .guide .navi_main .link_main>*, .Access .guide .navi_main .link_main>*>* { } /* height: 100%; */ .Access .guide .navi_main .link_main .ColorBtn { height: 100%; } /* [アクセス](access.php) google */ .Access .AboutusMap { margin-top: var(--padding_tb); } /* ============================================================================================================ お問い合わせ ------------------------------------------------------------------------------------------------------------ */ .ClassContact { } /* [お問い合わせ] 画像ダウンロード */ .Download .ClassContact { margin-top: 0; } .Download .ClassContact a { text-decoration-line: none; } .Download .ClassContact a[target] { } .Download .ClassContact a[target]>* { grid-template-columns: 1fr; } .Download .ClassContact a[target]>*::before { content: none; } /* ============================================================================================================ 写真撮影・ドローン空撮申請 request.php ------------------------------------------------------ [250520-1524/250611-1126]　全文差し替え ------------------------------------------------------------------------------------------------------------ */ .Request { } .Request .List { display: grid; gap: var(--padding_tb); } .Request .List .icon_set { font-weight: bold; display: grid; grid-template-columns: 1.25em 1fr; align-content: center; align-items: center; gap: 0.5em; } .Request .List .icon_set .Img { aspect-ratio: 1; display: block; background-color: rgb(var(--bl)); border-radius: 100em; } .Request .List .icon_set .Img>* { display: grid; align-items: center; } .Request .List .icon_set .Img img { scale: 0.8; filter: brightness(0) invert(1); } .Request .List .icon_set .Caption { } .Request .List .icon_set .Caption>* { font-size: 1.1em; } .Request .List .icon_set:not(.icon_id_contact) { } .Request .List .icon_set:not(.icon_id_contact) .Img { scale: 1.5; left: -0.25em; } .Request .List .icon_set:not(.icon_id_contact) .Caption { } .Request .List .Item { text-align: justify; display: grid; gap: var(--gap); } .Request .List .Item .body { display: grid; grid-template-areas: "title title" "Img main" "Img drone" ; grid-template-columns: repeat(2, 1fr); gap: var(--gap); } .Request .List .Item .body>.Img { grid-area: Img; } .Request .List .Item .body>.title { grid-area: title; } .Request .List .Item .body>.main { grid-area: main; } .Request .List .Item .body>.madronein { grid-area: drone; } .Request .List .Item .body>.title { margin: 0; } /* display: grid; grid-template-columns: 2em 1fr; */ .Request .List .Item .body>.title>b { display: block; text-align: center; padding-left: calc(var(--h2_gap) * 2); padding-right: calc(var(--h2_gap) * 2); } .Request .List .Item .body>.title>* b { font-weight: inherit; } .Request .List .Item .body>.title .num { position: absolute; left: 50%; bottom: 100%; translate: -50% -0%; width: 3em; } .Request .List .Item .tr { display: grid; gap: 0.5em; } /* grid-template-columns: calc(var(--em) * 10) 1fr; border-bottom-width: 1px; padding-bottom: 1em; padding-bottom: calc(var(--gap) / 2); */ .Request .List .Item .th { } /* color: rgb(var(--bl)); */ .Request .List .Item .td { margin-left: 1.5em; } .Request .List .Item .main { display: grid; gap: 1em; } .Request .List .Item .main .data { display: grid; gap: 1em; gap: var(--gap); } .Request .List .Item .main .data .common_shoot { display: grid; gap: calc(var(--gap) / 2); } .Request .List .Item .main .data .common_shoot :is(.memo, .Notes) { display: grid; gap: 0.5em; font-size: 0.9em; background-color: transparent; border-width: 0; padding: 0; } .Request .List .Item .main .data .common_shoot :is(.memo, .Notes) .head { line-height: 1; display: grid; grid-template-columns: repeat(2, auto); justify-content: start; justify-items: start; align-items: center; gap: 0.5em; width: auto; margin-left: 0; margin-right: auto; padding: 0.25em; padding-right: 0.75em; background-color: rgb(var(--y)); } .Request .List .Item .main .data .common_shoot :is(.memo, .Notes) .head .mark { aspect-ratio: 1; display: grid; align-items: center; width: 1.5em; text-align: center; letter-spacing: normal; background-color: rgb(var(--w)); color: rgb(var(--r)); font-weight: bold; } .Request .List .Item .main .data .common_shoot :is(.memo, .Notes) .txt { margin-top: 0; } .Request .List .Item .main .type, .Request .List .Item .main .c_Item { padding: 1em; border-width: 1px; background-color: rgb(var(--w) / 0.5); } .Request .List .Item .main *[class*="type"] { font-weight: bold; } .Request .List .Item .main *[class*="type"]>.td { font-size: 1.1em; } .Request .List .Item .main .c_Item { display: grid; gap: 1em; } .Request .List .Item .main .c_Item .c_type { border-width: 0; padding: 0; text-align: center; } .Request .List .Item .main .c_Item .c_type .td { margin-left: 0; } .Request .List .Item .footer { } /* ------------------------------------------------------ [写真撮影・ドローン空撮申請]　個別 */ /* [250704-1212]校正　伊良湖菜の花ガーデンは、「ひまわりの開花時期を問わず受付不可」になった .Request .List :is(.ID_id1) .drone { grid-column: span 2; } .Request .List :is(.ID_id1) .drone .tr { justify-content: center; } .Request .List :is(.ID_id1) .drone .td { display: grid; gap: 1em; gap: 0.5em; } .Request .List :is(.ID_id1) .Btn { display: grid; justify-content: start; gap: var(--gap); margin-top: 0.5em; } / grid-template-columns: repeat(2, 1fr); / .Request .List :is(.ID_id1) .Btn>*[class*="form"] { display: grid; align-content: start; gap: var(--gap); } .Request .List :is(.ID_id1) .Btn :is(h3, h4) { margin-top: 0; margin-bottom: 0; } .Request .List :is(.ID_id1) .Btn .rd_Item { display: grid; grid-template-columns: repeat(2, 1fr); justify-content: center; justify-items: center; gap: 0.5em 1em; } .Request .List :is(.ID_id1) .Btn .ColorBtn { } .Request .List :is(.ID_id1) .Btn .ColorBtn>b { } .Request .List :is(.ID_id1) .Btn .ColorBtn>b>span { display: flex; gap: 0.5em; } */ .Request .List :is(.ID_id3) .main .data { grid-template-columns: repeat(3, 1fr); } .Request .List :is(.ID_id3) .main .data>*:not(.c_Item), .Request .List :is(.ID_id3) .drone { margin-left: 1em; } .Request .List :is(.ID_id3) .main .data>*:not(.c_Item) { grid-column: span 3; } .Request .List :is(.ID_id5, .ID_id6) .c_Item { grid-template-columns: calc(var(--em) * 5) 1fr; } .Request .List :is(.ID_id5, .ID_id6) .c_Item .c_type { grid-row: span 2; } .Request .List :is(.ID_id7) .main .data { } .Request .List :is(.ID_id7) .main .data>*:not(.c_Item), .Request .List :is(.ID_id7) .drone { margin-left: 1em; } /* [250520-1524/250611-1126]　全文差し替え .Request :is(.Ct1, .Ct2) .main { margin-top: var(--gap); display: grid; grid-template-columns: repeat(1, 1fr); justify-content: center; justify-items: center; gap: var(--padding_tb); } / .Request :is(.Ct1, .Ct2) .main>* { display: inline-block; } / .Request :is(.Ct1, .Ct2) .main_body { display: grid; grid-template-columns: repeat(1, 1fr); justify-content: center; justify-items: center; gap: var(--gap); } .Request .Ct2 .Step { margin-top: var(--gap); } .Request .Ct2 .Step>ol { display: grid; display: flex; gap: 6em; } .Request .Ct2 .Step>ol>li { width: 100%; } .Request .Ct2 .Step>ol>li:not(:last-of-type) { } .Request .Ct2 .Step>ol>li:not(:last-of-type)::after { aspect-ratio: 1 / cos(30deg); content: ""; display: block; position: absolute; left: calc(100% + ((6em - 2em) / 2)); top: 50%; translate: -0% -50%; rotate: -90deg; width: 2em; background-color: rgb(var(--bl) / 0.2); clip-path: polygon( 0 0, 50% 100%, 100% 0 ); } .Request .Ct2 .Step>ol>li>.Wrap { display: grid; justify-items: center; gap: 1em; padding: 0 var(--gap) var(--gap); background-color: rgb(var(--bl) / 0.2); border-radius: 1em; } .Request .Ct2 .Step .step_head { } .Request .Ct2 .Step .step_head .num { font-size: 1.5em; aspect-ratio: 1; top: -1em; margin-bottom: -1em; display: grid; justify-items: center; align-items: center; width: 2em; background-color: rgb(var(--w)); border-radius: 100em; text-align: center; letter-spacing: normal; line-height: 0; } .Request .Ct2 .Step .step_head .num::before { aspect-ratio: 1; content: ""; display: block; position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: -45deg; width: calc(100% + (3px * 2)); border-top-width: 3px; border-right-width: 3px; border-color: rgb(var(--bl) / 0.2); border-radius: 100em; } .Request .Ct2 .Step .step_main { margin: 0; } .Request .Ct2 .footer { } .Request .Ct2 .footer>.Wrap { display: grid; gap: 1em; } .Request .Ct2 .footer .footer_title { padding: 0.5em 1em; background-color: rgb(var(--bl) / 0.2); border-radius: 1em; margin-bottom: 0; } .Request .Ct2 .footer .footer_title>* { font-size: 1.2em; } */ /* ============================================================================================================ 一覧表示 フォトコンテスト バックナンバー(photo_contest_award.php) スポット(spot/index.php) パンフレットダウンロード(pamphlet.php) ------------------------------------------------------------------------------------------------------------ */ .ArticleList { } .ArticleList .List { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--padding_tb) var(--gap); } /* align-items: start; */ .ArticleList .List .Item { background-color: rgb(var(--w)); padding: var(--gap); } /* height: 100%; */ .ArticleList .List .Item>.Wrap { display: grid; align-items: start; align-content: start; gap: 0; height: 100%; } /* gap: var(--gap); grid-template-areas: "h2" "img" "lead" "txt" "PDF" "EX" ; .ArticleList .List .Item>.Img { grid-area: img; } .ArticleList .List .Item>h2 { grid-area: h2; } .ArticleList .List .Item>.lead { grid-area: lead; } .ArticleList .List .Item>.txt { grid-area: txt; } .ArticleList .List .Item>.PDF { grid-area: PDF; } .ArticleList .List .Item>.EX { grid-area: EX; } */ .ArticleList .List .Item :is(a, .a) .title>.Wrap { display: flex; flex-wrap: wrap; gap: 0 calc(var(--gap) / 3); } .ArticleList .List .Item :is(a, .a) .title>.Wrap>b { font-size: 1.1em; font-weight: bold; } .ArticleList .List .Item .ColorBtn { width: 100%; min-width: initial; } .ArticleList .List .Item h2 { display: block; margin: 0; } /* font-family: inherit; font-weight: inherit; */ .ArticleList .List .Item h2>b { display: inline-grid; align-items: center; font-size: 1.2em; font-size: 1em; min-width: initial; width: 100%; height: 4em; height: 5em; padding: 0 0.5em; border-radius: 0; } /* font-weight: bold; */ .ArticleList .List .Item h3 { margin: 0; } .ArticleList .List .Item h3::before { content: none; } .ArticleList .List .Item h3>b { font-size: 1.2em; } .ArticleList .List .Item .Img img { width: 100%; height: 20em; object-fit: contain; } .ArticleList .List .Item .detail { text-align: justify; display: grid; gap: calc(var(--gap) / 3); } .ArticleList .List .Item .detail>.lead { } .ArticleList .List .Item .detail>.txt { border-top-width: 1px; border-top-style: dashed; border-top-color: rgb(var(--bk) / 0.5); padding-top: calc(var(--gap) / 3); } .ArticleList .List .Item .lead { margin: 0; font-size: inherit; } .ArticleList .List .Item .PDF { display: grid; gap: calc(var(--gap) / 3); } .ArticleList .List .Item .EX { } /* padding: var(--gap); background-color: rgb(var(--w)); border-width: 1px; border-style: dashed; */ /* detailへ button */ .ArticleList .List .Item .arrow_circle { font-size: 0.8em; position: absolute;; right: 1em; bottom: 1em; } /* margin: 0 var(--gap) var(--gap) auto; */ /* ============================================================================================================ パンフレットダウンロード pamphlet.php ------------------------------------------------------------------------------------------------------------ */ .Pamphlet { } .Pamphlet .List .Item>.Wrap { gap: calc(var(--gap) / 2); } .Pamphlet .List .Item h2 { margin-left: calc(0em - var(--gap)); margin-right: calc(0em - var(--gap)); margin-bottom: calc(var(--gap) / 2) !important; } .Pamphlet .List .Item h2>b { font-size: 1.2em; background-color: transparent; color: rgb(var(--bl)); height: initial; } .Pamphlet .List .Item h3 { margin-bottom: 0 !important; } .Pamphlet .List .Item :is(a, .a) .title>.Wrap>b { font-size: inherit; } /* ============================================================================================================ 画像ダウンロード download.php ------------------------------------------------------------------------------------------------------------ */ .Download { } /* [260923]新規　[画像ダウンロード]　画像のご利用について */ .Download .riyou_guide { } .Download .riyou_guide .main { display: grid; gap: var(--gap); } .Download .riyou_guide .main>h2 { margin-bottom: 0; } .Download .riyou_guide .main .Item { display: grid; gap: calc(var(--gap) / 2); } .Download .riyou_guide :is(h3, h4) { margin-top: 0; margin-bottom: 0 !important; } .Download .riyou_guide .main .Item+.Item { margin-top: 1em; } .Download .riyou_guide ul { gap: calc(var(--gap) / 2); } /* 写真使用届ダウンロード（member.php 入会届ダウンロードと同様） */ .Download .riyou_guide .form_download { display: grid; justify-items: center; gap: 1em; margin-top: 1em; } .Download .riyou_guide .form_download .form_title { font-size: 1.1em; font-weight: 400; color: rgb(var(--bl)); } .Download .riyou_guide .form_download .detail { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); width: 70%; } .Download .riyou_guide .form_download .ColorBtn { flex: 1 1 0; min-width: initial; max-width: initial; } .Download .riyou_guide .form_download .ColorBtn>*>* { display: flex; align-items: center; justify-content: center; gap: 0.5em; } /* 提出先 */ .Download .riyou_guide .teishutsu { justify-self: start; display: inline-grid; grid-template-columns: repeat(2, auto); gap: 1em; margin-top: 0.5em; } .Download .riyou_guide .teishutsu .address { display: grid; grid-template-columns: auto 1fr; gap: 0.5em; text-align: left; } .Download .riyou_guide .teishutsu .address .label { font-weight: bold; } .Download .riyou_guide .teishutsu .address .addr_gap { margin-left: 1.5em; } .Download .riyou_guide .teishutsu .address .addr_gap_s { margin-left: 1em; } /* [画像ダウンロード]　利用規約 */ .Download .kiyaku { } .Download .kiyaku :is(h3) { margin-bottom: 0 !important; } .Download .kiyaku .main { display: grid; gap: var(--gap); } .Download .kiyaku .main .Item { display: grid; gap: calc(var(--gap) / 2); } .Download .kiyaku ul { gap: calc(var(--gap) / 2); } .Download .kiyaku .riyou_credit { display: inline-grid; grid-template-columns: repeat(2, auto); gap: 1em; margin-top: 1em; } .Download .kiyaku .riyou_credit .kome { color: rgb(var(--bl)); } /* [画像ダウンロード]　利用規約　禁止事項 */ .Download .kiyaku .ID_kinshi { } /* .Download .kiyaku .ID_kinshi .head { background-color: rgb(var(--pk)); color: rgb(var(--w)); } */ .Download .kiyaku .ID_kinshi h2 { margin-bottom: 0; } /* ------------------------------------------------------ [画像ダウンロード]　ダウンロードリスト */ .Download .ArticleList .List { gap: var(--gap); } .Download .ArticleList .List :is(h2, h3, h4) { display: grid; margin-bottom: 0 !important; text-align: justify !important; } .Download .ArticleList .List :is(h2, h3, h4)>* { display: block; } .Download .ArticleList .List :is(h2, h3, h4)>span { color: rgb(var(--bl)); line-height: 1; } .Download .ArticleList .List :is(h2, h3, h4)>b { height: initial; } .Download .ArticleList .List .Item { padding: 0em; } .Download .ArticleList .List .Item>.Wrap { display: grid; gap: 1em; padding: 1em; } .Download .ArticleList .List .Item .Img img { aspect-ratio: 16 / 9; height: auto; } .Download .ArticleList .List .Item a { display: block; } .Download .ArticleList .List .Item a[target] { } .Download .ArticleList .List .Item a[target]>* { display: block; } .Download .ArticleList .List .Item .glass { position: absolute; top: 0.5em; right: 0.5em; display: grid; justify-items: center; grid-template-columns: 1fr; width: 2em; } .Download .ArticleList .List .Item .glass>* { grid-template-columns: 1fr; } .Download .ArticleList .List .Item .glass .Img { aspect-ratio: 1; width: 100%; background-color: rgb(var(--bl) / 0.8); border-radius: 100em; } .Download .ArticleList .List .Item .glass .Img img { aspect-ratio: 1; display: block; filter: brightness(0) invert(1); } .Download .ArticleList .List .Item .glass .caption { font-size: 0.8em; } .Download .ArticleList .List .Item .data { display: grid; gap: 0.5em; } .Download .ArticleList .List .Item .data .up_date { font-size: 0.8em; text-align: right; } .Download .ArticleList .List .Item .data .download_button { display: inline-block; } .Download .ArticleList .List .Item .data .download_button .ColorBtn { display: inline-block; width: auto; margin-top: 0; margin-left: auto; margin-right: auto; } .Download .ArticleList .List .Item .data .download_button .ColorBtn>* { } /* ============================================================================================================ 便利なサービス convenient.php ------------------------------------------------------------------------------------------------------------ */ .Convenient { } .Main.Convenient>.Wrap>.Wrap { display: grid; gap: var(--padding_tb); } /* [便利なサービス]　コインロッカー　[250127]原稿着 */ .Convenient .Ct.locker .Gallery { margin: 0; } .Convenient .Ct.locker .Gallery>ul { display: flex; gap: 1em; } .Convenient .Ct.locker .Gallery>ul>li { } .Convenient .Ct.locker .body { display: grid; gap: var(--padding_tb); } .Convenient .Ct.locker .main_Item>.Wrap { display: grid; grid-template-areas: "title title" "photo1 detail" ; grid-template-columns: repeat(2, 1fr); align-items: start; gap: var(--gap); } .Convenient .Ct.locker .main_Item>.Wrap>.title { grid-area: title; } .Convenient .Ct.locker .main_Item>.Wrap>.detail { grid-area: detail; } .Convenient .Ct.locker .main_Item>.Wrap>.photo1 { grid-area: photo1; } .Convenient .Ct.locker .main_Item { display: grid; gap: var(--gap); } .Convenient .Ct.locker .main_Item .title { margin-bottom: var(--gap); } .Convenient .Ct.locker .main_Item .photo1 .Caption { font-size: 1.2em; position: absolute; right: 1em; bottom: calc(100% - 0.25em); min-width: 8em; padding: 0.125em 0.5em; filter: drop-shadow(1px 1px 0px rgb(var(--w))); } .Convenient .Ct.locker .main_Item .photo1 .Caption::before { --arrow_w : 1em; --arrow_h : 0.75em; --arrow_position_l : 1em; content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: calc(100% + var(--arrow_h)); background-color: rgb(var(--y) / 0.95); clip-path: polygon( 0 0, 100% 0, 100% calc(100% - var(--arrow_h)), calc(var(--arrow_position_l) + var(--arrow_w)) calc(100% - var(--arrow_h)), calc(var(--arrow_position_l) + (var(--arrow_w) / 2)) 100%, var(--arrow_position_l) calc(100% - var(--arrow_h)), 0 calc(100% - var(--arrow_h)) ); } .Convenient .Ct.locker .detail { display: inline-grid; } .Convenient .Ct.locker .detail .tr { display: grid; grid-template-columns: 5em auto; gap: 0em; text-align: left; } .Convenient .Ct.locker .detail :is(.th, .td) { padding-top: 1em; padding-bottom: 1em; } .Convenient .Ct.locker .detail .td>.Wrap { display: flex; gap: 0.5em; } .Convenient .Ct.locker .detail :is(.num, .fee) .td { display: flex; gap: var(--gap); } .Convenient .Ct.locker .detail :is(.num, .fee) .td>* { width: 100%; } .Convenient .Ct.locker .photo2 { } .Convenient .Ct.locker .photo2>ul { justify-content: center; } .Convenient .Ct.locker .photo2>ul>li { width: calc((100% - (1em * 2)) / 3); width: 100%; } .Convenient .Ct.locker .detail .sub { text-align: left; } /* ============================================================================================================ お役立ち情報 useful.php ------------------------------------------------------------------------------------------------------------ */ .Useful { } .Main.Useful>.Wrap>.Wrap { display: grid; gap: var(--padding_tb); } /* [お役立ち情報]　田原市の天気・気温 */ .Useful .weather { } /* [お役立ち情報]　日の出・日の入 */ .Useful .sun_rises_sunset { } .Useful .sun_rises_sunset .list { margin-top: var(--gap); display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: 1em; } .Useful .sun_rises_sunset .list .day { display: grid; gap: 0em; padding: 1em; background-color: rgb(var(--w)); } /* justify-content: center; */ .Useful .sun_rises_sunset .list .day .day_head { font-size: 1.1em; display: grid; grid-template-areas: "yy yy" "Img mmdd" ; grid-template-columns: 3em 1fr; align-items: center; gap: 0; z-index: 1; } .Useful .sun_rises_sunset .list .day .day_head>.yy { grid-area: yy; } .Useful .sun_rises_sunset .list .day .day_head>.mmdd { grid-area: mmdd; } .Useful .sun_rises_sunset .list .day .day_head>.Img { grid-area: Img; } .Useful .sun_rises_sunset .list .day .day_head>.yy { line-height: 1; } .Useful .sun_rises_sunset .list .day .day_head>.mmdd { } .Useful .sun_rises_sunset .list .day .day_head>.mmdd>b { font-weight: inherit; font-size: 1.5em; } .Useful .sun_rises_sunset .list .day .day_head>.mmdd>.week { font-size: 0.9em; } .Useful .sun_rises_sunset .list .day .day_main { display: inline-grid; justify-items: center; gap: 0.5em; text-align: justify; } .Useful .sun_rises_sunset .list .day .day_main::before { content: ""; display: block; position: absolute; left: 50%; bottom: 0%; translate: -50% -0%; width: 100%; height: 125%; --gradation_angle : 175deg; --gradation_color_start : var(--gradation1_bl); --gradation_color_start_alpha : 0.5; --gradation_color_end : var(--r2); --gradation_color_end_alpha : 0.5; background-image: linear-gradient( var(--gradation_angle), rgb(var(--gradation_color_start) / var(--gradation_color_start_alpha)), rgb(var(--w)), rgb(var(--gradation_color_end) / var(--gradation_color_end_alpha)) ); background-color: rgb(var(--w) / 0); border-radius: 0.5em; filter: blur(0.5em); } .Useful .sun_rises_sunset .list .day .day_main>* { display: grid; grid-template-columns: 5em auto; align-items: center; gap: 0.5em; } .Useful .sun_rises_sunset .list .day .day_main>*>span { text-align: center; } .Useful .sun_rises_sunset .list .day .day_main .day_sunrise>span { } /* background-color: rgb(var(--gradation1_bl) / 0.5); */ .Useful .sun_rises_sunset .list .day .day_main .day_sunset>span { } /* background-color: rgb(var(--r2) / 0.5); */ /* [お役立ち情報]　もしもの災害に */ .Useful .disaster { } /* --arrow_color : var(--or); */ .Useful .disaster .color { color: rgb(var(--or)); } .Useful .disaster :is(h3, h4) { margin-top: 0; margin-bottom: 0 !important; } .Useful .disaster h3 { min-height: 6em; display: grid; align-items: center; border-radius: 0; } .Useful .disaster h3>b { color: inherit; } .Useful .disaster .body { margin-top: var(--gap); display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; gap: var(--gap); } /* gap: var(--padding_tb) calc(var(--gap) * 2); */ .Useful .disaster .body .Item { display: grid; gap: 0; background-color: rgb(var(--w)); } .Useful .disaster .body .main { display: grid; gap: var(--gap); padding: calc(var(--gap) * 0.8) var(--gap); } .Useful .disaster .body .detail { display: grid; gap: calc(var(--gap) / 2); text-align: justify; } /* gap: var(--gap); grid-template-columns: repeat(2, 1fr); */ .Useful .disaster .body .detail .Btn { margin-top: 1em; margin-left: 1em; display: grid; gap: 1em; } /* [お役立ち情報]　もしもの災害に　個別　1 */ .Useful .disaster .body .ID_1 { grid-column: span 2; } .Useful .disaster .body .ID_1 .detail { grid-template-columns: repeat(2, 1fr); gap: var(--gap); } /* */ /* [お役立ち情報]　赤ちゃんの駅 */ .Useful .baby { } /* [お役立ち情報]　観光案内所 */ .Useful .touristinfo { } /* [250128-0955]校正　大きく */ .Useful .touristinfo>.Wrap.Layout { font-size: 1.2em; display: inline-grid; gap: 0; text-align: left; } .Useful .touristinfo>.Wrap.Layout>* { display: grid; gap: 0em; border-bottom-width: 1px; } .Useful .touristinfo>.Wrap.Layout>*>* { display: grid; grid-template-columns: 4em auto; justify-content: start; gap: 1em; padding-top: 0.5em; padding-bottom: 0.5em; } /* [250128-0955]校正　大きくした分、空き詰める padding-top: 1em; padding-bottom: 1em; */ .Useful .touristinfo>.Wrap.Layout>*>*>span:first-of-type { } /* text-align: right; */ .Useful .touristinfo>.Wrap.Layout>*>*:not(:last-child) { border-bottom-width: 1px; } .Useful .touristinfo>.Wrap.Layout .address { display: flex; gap: 1em; } .Useful .touristinfo>.Wrap.Layout .address>* { display: block; display: flex; flex-wrap: wrap; gap: 0 1em; } .Useful .touristinfo>.Wrap.Layout .address .Zip { border-width: 0; } .Useful .touristinfo>.Wrap.Layout .open_closed .closed { display: block; } /* ============================================================================================================ 後援申請 suport.php ------------------------------------------------------------------------------------------------------------ */ .Suport { } .Suport .ct2 .Layout { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: var(--gap); } /* ============================================================================================================ 観光ビューローについて aboutus.php ------------------------------------------------------------------------------------------------------------ */ .Aboutus { } /* [250411-1313]追加　「観光ビューローについて」のページの赤〇のあたり（ご入会お待ちしておりますの後のあたり）に、「会員申込み」のページへ飛べるようなボタンを追加 */ .Aboutus .gaiyou { } .Aboutus .gaiyou .ClassMember { position: absolute; right: 0; top: 50%; translate: -0% -50%; } /* ============================================================================================================ 会員一覧 member_list.php ------------------------------------------------------------------------------------------------------------ */ .MemberList { } /* [250321]追加　絞り込み */ .MemberList .head { position: absolute; left: 0; top: 0; } .MemberList .head .search_box { } .MemberList .member_bosyu { text-align: right; } /* position: absolute; top: 0; right: 0; */ .MemberList .member_bosyu .ColorBtn { } .MemberList .member_bosyu .ColorBtn>* { font-weight: bold; } .MemberList .List+.member_bosyu { margin-top: var(--padding_tb); text-align: center; } /* */ .MemberList .List { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap) var(--gap); } .MemberList .List article { background-color: rgb(var(--w)); } /* height: 100%; */ .MemberList .List article:nth-child(2n+2) { margin-top: var(--gap); margin-bottom: calc(0em - var(--gap)); } /* */ /* .MemberList .List article:nth-child(3n+3) { margin-top: calc(var(--gap) * 2); margin-bottom: calc(0em - (var(--gap) * 2)); } */ .MemberList .List article { } .MemberList .List article>.Wrap { display: grid; align-items: start; align-content: start; gap: 1em; height: 100%; } .MemberList .List a { text-decoration-line: none; } .MemberList .List h2 { max-width: initial; min-width: initial; width: 100%; margin: 0; line-height: 1.5; } .MemberList .List h2>b { font-size: 1.2em; text-align: left; font-weight: bold; display: flex; justify-content: center; align-items: center; max-width: initial; min-width: initial; width: 100%; height: 4em; padding: 0 0.5em; background-color: rgb(var(--gradation2_gr)); border-radius: 0; text-shadow: 1px 1px 0.1em rgb(var(--bk) / 0.5); } .MemberList .List .data { padding: 0 calc(var(--gap) / 2) calc(var(--gap) / 2); display: grid; gap: 1em; text-align: justify; } .MemberList .Item .data>*::after { content: ""; display: block; position: absolute; top: calc(100% + (1em / 2)); left: 0; right: 0; width: 100%; height: 0; border-top-width: 1px; border-top-color: rgb(var(--bk) / 0.3); border-top-style: dashed; } .MemberList .Item .address_set { display: grid; grid-template-columns: 6em 1fr; justify-content: start; gap: 1em; } .MemberList .Item .tel_fax>* { display: flex; gap: 0.5em; } .MemberList .List .footer { position: absolute;; right: 1em; bottom: 0.5em; } /* font-size: 0.8em; justify-self: end; text-align: right; */ .MemberList .List .cate-tag::after { } /* content: none; */ .MemberList .List .footer::after { content: none; } .MemberList .List .Btn>* { font-size: 0.8em; gap: 1em; padding-right: 0.5em; border-width: 2px; border-color: rgb(var(--gradation2_gr)); border-radius: 100em; } .MemberList .List .Btn>*::before { margin-left: -2px; background-color: rgb(var(--gradation2_gr)); background-image: url(../img/layers.svg); background-size: 1em; mask: none; width: auto; height: 100%; border-radius: 100em; } /* .MemberList .List .Btn>* { font-size: 0.8em; line-height: 0; display: grid; grid-template-columns: 2em 1fr; align-items: center; gap: 0.5em; padding-right: 0.5em; border-width: 2px; border-color: rgb(var(--gradation2_gr)); border-radius: 100em; } .MemberList .List .Btn .url_icon { aspect-ratio: 1 / 1; display: grid; justify-content: center; align-items: center; background-color: rgb(var(--gradation2_gr)); margin-left: -2px; width: 100%; border-radius: 100em; } .MemberList .List .Btn>*:not(.url_icon) { } *//* mask-image: linear-gradient(#000, #000), url(../img/layers.svg); mask-position: center; mask-repeat: no-repeat; mask-composite: exclude; .MemberList .List .Btn .url_icon img { width: 1em; } .MemberList .List .Btn>span:not(.url_icon)::before { } */ .MemberList .List .ColorBtn { font-size: 0.8em; min-width: initial; width: auto; background-color: rgb(var(--gradation2_gr)); border-width: 0; color: rgb(var(--w)); } .MemberList .List .ColorBtn::after { background-color: rgb(var(--w)); } /* ============================================================================================================ 会員募集 member.php ------------------------------------------------------------------------------------------------------------ */ .Member { } .Member .body .Ct { display: grid; gap: var(--padding_tb); padding-top: var(--padding_tb); } /* grid-template-areas: "syurui syurui" "fee jigyo_naiyou" "nyukai_houhou nyukai_houhou" "footer footer" ; grid-template-columns: repeat(2, 1fr); .Member .body .Ct>.syurui { grid-area: syurui; } .Member .body .Ct>.fee { grid-area: fee; } .Member .body .Ct>.jigyo_naiyou { grid-area: jigyo_naiyou; } .Member .body .Ct>.nyukai_houhou { grid-area: nyukai_houhou; } .Member .body .Ct>.footer { grid-area: footer; } */ .Member .body .Ct section { padding: 0; } /* ------------------------------------------------------ [会員募集]　会費の額 */ .Member .body .Ct .fee .main { display: grid; justify-content: center; gap: 1em; } .Member .body .Ct .fee .main>* { font-size: 1.2em; } /* ------------------------------------------------------ [会員募集]　事業内容 */ .Member .body .Ct .jigyo_naiyou .main { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 1em calc(var(--gap) * 2); text-align: left; } .Member .body .Ct .jigyo_naiyou .main>* { font-size: 1.2em; display: list-item; } /* ------------------------------------------------------ [会員募集]　入会方法 */ .Member .body .Ct .nyukai_houhou :is(h3, h4) { margin-top: 0; margin-bottom: 0; } .Member .body .Ct .nyukai_houhou .main { display: grid; gap: var(--gap); margin-top: var(--gap); } .Member .body .Ct .nyukai_houhou .main .ColorBtn>*>* { display: flex; align-items: center; gap: 0.5em; min-width: initial; max-width: initial; width: 100%; } .Member .body .Ct .nyukai_houhou .main .detail { --detail_item_w : calc((100% - (var(--gap) * 2)) / 3); --detail_item_w : calc((100% - (var(--gap) * 1)) / 2); width: 70%; margin-left: auto; margin-right: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: start; gap: var(--gap); } /* display: grid; grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, fit-content(calc(100% / 3))); grid-template-columns: repeat(auto-fit, minmax(var(--detail_item_w), 1fr)); align-items: start; gap: var(--gap); */ .Member .body .Ct .nyukai_houhou .main .detail .Item { display: grid; gap: calc(var(--gap) / 2); width: var(--detail_item_w); } .Member .body .Ct .nyukai_houhou .main .detail .ColorBtn { min-width: initial; max-width: initial; width: 100%; } /* ------------------------------------------------------ [会員募集]　お問合せ先 */ .Member .body .Ct .footer { justify-self: center; display: inline-block; background-color: rgb(var(--w)); padding: var(--gap) !important; border-radius: 1em; } .Member .body .Ct .footer h2 { min-width: initial; max-width: initial; width: 100%; margin-bottom: calc(var(--gap) * 1.5); } .Member .body .Ct .footer h2>b { min-width: initial; max-width: initial; width: 100%; border-radius: 0em; } .Member .body .Ct .footer .main { display: grid; justify-content: center; justify-items: center; gap: 1em; } .Member .body .Ct .footer .main .unei { font-size: 1.5em; font-weight: bold; } .Member .body .Ct .footer .main .tel_fax { display: grid; gap: 0; font-size: 1.2em; } .Member .body .Ct .footer .main .tel_fax>* { display: flex; gap: calc(var(--gap) / 3); } /* ============================================================================================================ プライバシーポリシー privacy.php ------------------------------------------------------------------------------------------------------------ */ .Privacy { } .Privacy :is(section, .section)>.Wrap { display: grid; gap: var(--gap); } .Privacy dl { font-size: inherit; } /* ============================================================================================================ サイトマップ sitemap.php ============================================================================================================ */ .Sitemap { } .Sitemap :is(section, .section) { padding-top: 0; margin-top: calc(0em - var(--gap)); } .Sitemap .body ul, .Sitemap .body ul>li { margin: 0; list-style: none; } .Sitemap .body a>* { display: flex; align-items: center; gap: 0.25em; } .Sitemap .body a>*::before { aspect-ratio: 1 / 1; content: ""; display: inherit; width: 1em; background-color: rgb(var(--bl)); mask-image: url('../img/arrow_line_r.svg'); mask-repeat: no-repeat; mask-position: center; mask-size: 100%; } .Sitemap .body a[target]>*::before { mask-image: url('../img/layers.svg'); margin-left: -0.25em; margin-right: 0.25em; } .Sitemap .body .Child a>*::before { background-color: rgb(var(--bk)); } .Sitemap .body { display: grid; grid-template-columns: 1fr; gap: var(--padding_tb); } .Sitemap .body>ul>li>.Wrap { height: 100%; padding-bottom: var(--gap); border-bottom-width: 1px; border-color: rgb(var(--bl)); } .Sitemap .body>ul>li>.Wrap>:is(a, .a) { font-size: 1.2em; color: rgb(var(--bl)); font-weight: bolder; } .Sitemap .body>ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); } .Sitemap .body :is(a, .a) .name br { position: absolute; display: none; opacity: 0; } .Sitemap .body .Child { margin-top: 1em; margin-left: 2em; } .Sitemap .body .Child>ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1em; } .Sitemap .body .SNS { grid-template-columns: repeat(1, 1fr); gap: var(--gap); width: auto; margin-left: auto; margin-right: auto; } .Sitemap .body .SNS a[target]>* { display: flex; } /* gap: 1em; */ .Sitemap .body .SNS>li>.Wrap { border-width: 0; padding-bottom: 0; } .Sitemap .SNS * { font-family: inherit; font-weight: inherit; font-size: inherit; } /* ============================================================================================================ [cms] ============================================================================================================ */ #cms { } /* #cms * { display: revert; font-weight: revert; margin: revert; padding: revert; } */ #cms :is(a, span, b, img, font, strong) { display: inline; } #cms :is(div, p) { display: block; } #cms a { } #cms a>* { } #cms a>*::before, #cms a>*::after { aspect-ratio: 1; position: absolute; width: 0; overflow: hidden; }