/* ================================ カジュアル ================================ */ *{ /*background-color: #000;*/ } #preview-body , main , .main , #main , *[role=main] , .aiw-body , .reset-style { & .wp-block-image img:not([style*=object-fit]) { height: 100% !important; } /*background-color: #0a53be;*/ & .aiw_layout { /* font-family: 'ダミー' , "Zen Maru Gothic" , "Hiragino Maru Gothic ProN" , 'M PLUS Rounded 1c' , 'Comic Neue' , "Kosugi Maru" , "HG丸ｺﾞｼｯｸM-PRO" , "Yu Gothic" , "Meiryo" , "Noto Sans JP" , "Hiragino Kaku Gothic ProN" , "MS PGothic" , sans-serif ; */ font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'HGS明朝E', 'MS Mincho', "ヒラギノ明朝 Pro", "游明朝体", serif !important; & *:first-child h2.aiw_heading::after{ display: none; } } & .aiw_first_catch_detail { position: relative; & > .wp-block-group__inner-container { & > .wp-block-group:nth-child(2) { & > .wp-block-group__inner-container { /*display: inline-block;*/ } position: absolute; bottom: 0; left: 0; /*max-width: 50%;*/ /* 白い縁取りを４方向に配置 */ text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, /* 最後に軽い黒シャドウで立体感 */ 1px 1px 2px rgba(0, 0, 0, 0.3); /*background-color: rgba(255, 255, 255, 0.2);*/ /*padding: calc(var(--aiw-space-unit-height) * 2) calc(var(--aiw-space-unit-width) * 4) calc(var(--aiw-space-unit-height) * 4) 0;*/ /*font-size: 1.4rem;*/ font-weight: bold; width: 100%; & h2 { font-size: 2.8rem; /*font-size: 4vw;*/ white-space: normal; /* 折り返しを有効に */ word-break: normal; /* 英単語の途中は切らない */ overflow-wrap: break-word; /* 長い文字列も折り返す */ line-break: strict; /* 日本語の禁則処理を厳格に適用 */ text-align: left; max-width: 80%; & em { font-size: 3rem; color: #FF6D79; font-style: normal; } & strong { color: #BD8F0C; font-size: 4rem; font-style: normal; } } & p { font-size: 1.4rem; /*font-size: 2vw;*/ text-align: left; /*font-weight: normal;*/ max-width: 80%; } /* スマホ用（～767px） */ @media (max-width: 767px) { & h2 { font-size: 2rem; max-width: 100%; } & p { font-size: 1.2rem; max-width: 100%; } } } } /* -------------------------------- 背景画像の設定 -------------------------------- */ position: relative; overflow: hidden; /* はみ出し画像を切り落とし */ /* 背景は擬似要素で敷くので本体には何も指定しない */ background-color: initial; } & .aiw_layout_action_col { /*padding: calc(var(--aiw-space-unit-height) * 1) calc(var(--aiw-space-unit-width) * 4);*/ /*padding: 0;*/ /*background-color: initial;*/ & h2 { color: #fff; text-align: center; /*font-family: 'Noto Sans JP', sans-serif;*/ font-size: 2rem; font-weight: bold; display: inline-block; } & h2::after { content: ""; display: block; width: 100%; /*height: 4px;*/ /*background-color: #66f;*/ border-bottom: 4px dotted #fff; margin: 8px auto 0; } & .aiw_description { color: #fff; margin: calc(var(--aiw-space-unit-width) * 1) auto 0; /*font-family: 'Noto Sans JP', sans-serif;*/ } & .aiw_list { background-color: initial; & .aiw_list_wrap { padding: 0; & .aiw_list_wrap_element { & .wp-block-buttons { & .wp-block-button { & a { background-color: #24C2E9; border-radius: 10rem; border: 2px solid #fff; & em { color: #FFF; } & strong { /*color: #FFFB08;*/ color: #fff; } } } } } } } & > .wp-block-group__inner-container { /*background-color: #fff;*/ /*padding: calc(var(--aiw-space-unit-height) * 2) calc(var(--aiw-space-unit-width) * 2);*/ } /* -------------------------------- 背景画像の設定 -------------------------------- */ position: relative; overflow: hidden; /* はみ出し画像を切り落とし */ /* 背景は擬似要素で敷くので本体には何も指定しない */ background-color: #FFAB4A; &::before { content: ""; position: absolute; inset: 0; /* top:0; right:0; bottom:0; left:0; と同じ */ / cover /* アスペクト比を保ったまま要素全体にフィット */ no-repeat; opacity: 1; /* 背景画像だけ半透明 */ z-index: -1; /* コンテンツ背面へ */ } } & .aiw_offer_2col_list{ & *:first-child h2.aiw_heading{ color: #945D20; &::after { display: none; width: 100%; /*height: 2px;*/ /*background-color: #FF6D79;*/ } } .aiw_list{ & .aiw_list_wrap { & .aiw_list_wrap_element { & .wp-block-columns { & .wp-block-column { &:nth-child(1){ z-index: -1; figure{ border-radius: 2rem; overflow: hidden; } } &:nth-child(2){ z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; /*margin-left: calc(-1 * var(--aiw-space-unit-width) * 6);*/ /*margin-right: calc(1 * var(--aiw-space-unit-width) * 6);*/ & h3 { display: block; color: #FFAB4A; /*text-align: right;*/ width: 100%; /*display: flex;*/ /*justify-content: flex-end;*/ } & p{ background-color: #FFF4E7; /* 80% 不透明（やや透ける） */ background-color: rgba(255, 244, 231, 0.8); /* 60% 不透明（ほどよく透ける） */ /*background-color: rgba(255, 244, 231, 0.6);*/ /* 50% 不透明（半透明） */ /*background-color: rgba(255, 244, 231, 0.5);*/ padding: calc(var(--aiw-space-unit-height) * 2) calc(var(--aiw-space-unit-width) * 2); border-radius: 2rem; } @media (max-width: 767px) { margin-left: auto; margin-right: auto; } } } } } } /*左右反転*/ & .aiw_list_wrap:nth-child(2) { & .aiw_list_wrap_element { & .wp-block-columns { flex-direction: row-reverse; & .wp-block-column { &:nth-child(1){ } &:nth-child(2){ margin-left: calc(1 * var(--aiw-space-unit-width) * 4); margin-right: calc(-1 * var(--aiw-space-unit-width) * 4); & h3 { text-align: left; } & p{ } } } } } } } } & .aiw_layout_step_list{ background-color: #FFF5EA; & h2{ color: #FFAB4A; } & .aiw_list{ & .wp-block-columns{ } & .aiw_list_wrap{ & .aiw_list_wrap_element{ & .wp-block-columns{ & .wp-block-column{ &:nth-child(1){ display: none; &::before{ } } &:nth-child(2){ max-width: 40%; /* 80% 不透明（やや透ける） */ background-color: rgba(255, 244, 231, 0.8); /* 60% 不透明（ほどよく透ける） */ /*background-color: rgba(255, 244, 231, 0.6);*/ /* 50% 不透明（半透明） */ /*background-color: rgba(255, 244, 231, 0.5);*/ background-color: #fff; border-radius: 2rem; margin-right: -10rem; padding-right: 5rem; margin-top: 3rem; margin-bottom: 3rem; & h3{ color: #945D20; } } &:nth-child(3){ z-index: 1; display: flex; justify-content: flex-end; align-items: center; & figure{ aspect-ratio: 1 / 1; /* 正方形の枠 */ border-radius: 50%; /* 正円化 */ overflow: hidden; /* はみ出しを隠す */ width: 80%; /* 親に合わせる（必要に応じて max-width を調整） */ & img{ width: 100%; height: 100%; object-fit: cover; /* 中央でトリミング */ display: block; /* 画像下の余白を消す */ } } } } } /* スマホ用（～767px） */ @media (max-width: 767px) { & .wp-block-columns{ flex-direction: column-reverse; & .wp-block-column{ &:nth-child(1){ &::before{ } } &:nth-child(2){ max-width: 100%; margin-right: initial; padding: calc(var(--aiw-space-unit-height) * 2) calc(var(--aiw-space-unit-width) * 2); margin-top: initial; margin-bottom: initial; & h3{ } } &:nth-child(3){ justify-content: flex-end; & figure{ max-width: 30%; margin-bottom: -4rem; & img{ } } } } } } } } } } & .aiw_greeting_2col{ & > .wp-block-group__inner-container { border: 5px solid #FFAB4A; padding: calc(var(--aiw-space-unit-height) * 4) calc(var(--aiw-space-unit-width) * 4); } & h2 { background-color: #945D20; color: #fff; width: 100%; display: flex; justify-content: center; align-items: center; width: 100%; flex-direction: column; padding: 0.5rem; } & .wp-block-columns{ & .wp-block-column{ &:nth-child(1){ flex: 4; } /*テキストが入る列*/ &:nth-child(2){ flex: 6; } & h3{ color: #FFAB4A; } & figure{ aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; width: 100%; & img{ width: 100%; height: 100%; object-fit: cover; display: block; } & img:not([style*=object-fit]) { height: 100% !important; } box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06); } } } _ } & .aiw_company_info_data_table{ background-color: #FFF5E9; & h2{ color: #945D20; } } & .aiw_layout_paragraph_list { /* -------------------------------- 背景画像の設定 -------------------------------- */ position: relative; overflow: hidden; /* はみ出し画像を切り落とし */ /* 背景は擬似要素で敷くので本体には何も指定しない */ background-color: initial; & h2{ color: #FFAB4A; } & .aiw_list { & .aiw_list_wrap { & .aiw_list_wrap_element { border-bottom: 1px solid #D9D9D9; border: 1px solid #945D20; border-radius: 1rem; padding: 0; margin-bottom: 1rem; &:last-child { /*border-bottom: none;*/ } & h3{ border-bottom: 2px dotted #D9D9D9; min-height: 4rem; & i{ background-color: #945D20; color: #fff; display: flex; border-radius: 1rem 0 0 0; justify-content: center; align-items: center; /*width: 3rem;*/ /*height: 3rem;*/ } } & p{ /*padding: 1rem;*/ margin: 0; min-height: 4rem; } /* スマホ用（～767px） */ @media (max-width: 767px) { & h3{ font-size: 1rem; } & p{ font-size: 1rem; } } } } } } & .aiw_customer_card_list{ background-color: #FFF5EA; & h2 { color: #945D20; } & .aiw_list{ & .aiw_list_wrap{ & .aiw_list_wrap_element{ border-radius: 2rem; box-shadow: initial; border: 0px solid #eee; &:hover { } & figure{ & img{ } } & h3{ /*background-color: #945D20;*/ color: #fff; color: #945D20; padding: calc(var(--aiw-space-unit-height) * 1) calc(var(--aiw-space-unit-height) * 1); border-radius: 2rem; text-align: left; } & p{ } & h4{ flex: 1; display: flex; justify-content: flex-end; align-items: flex-end; } } } } } & .aiw_service_card_list{ background-color: #FFAB4A; color: #fff; & > .wp-block-group__inner-container { max-width: 1024px; } & h2 { color: #fff; } & .aiw_description { color: #fff; } & .aiw_list{ & .aiw_list_wrap{ & .aiw_list_wrap_element{ background-color: initial; box-shadow: initial; border: 0px solid #eee; &:hover { } & figure{ & img{ /*max-height: initial;*/ border-radius: 2rem; } } & h3{ color: #fff; } & p{ color: #fff; } & h4{ color: #fff; } } } } } & .aiw_solution_card_list { background-color: #FFF5EA; & h2 { color: #945D20; } & .aiw_list { & .aiw_list_wrap { & .aiw_list_wrap_element { border-radius: 2rem; box-shadow: initial; border: 0px solid #eee; & h3{ color: #945D20; } } } } } & .aiw_reason_card_list{ background-color: #FFF; & h2 { color: #FFAB4A; } & .aiw_list { & .aiw_list_wrap { & .aiw_list_wrap_element { border: 0px solid #eee; box-shadow: initial; & h3{ color: #945D20; } & figure { & img { border-radius: 2rem; } } } } } } }