@charset "utf-8";
/* CSS Document */
/* reset
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
border: 0;
outline: 0;
}
html {
font-size: 62.5%;/*10pxと同等*/
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
a {
margin: 0;
padding: 0;
text-decoration: none;
}
/*基本レイアウト
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*body
------------------------------------------------------------*/
body {
font-family: 'Noto Sans JP', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
font-weight: 400;
font-size: 1.6rem;/*16pxと同等*/
line-height: 1.6;
color: #243751;
/*↓フォントのアンチエイリアス*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/*↓スマホで横向きにしても文字がいい感じになる*/
text-size-adjust: 100%;/**/
/*↓英文字やURLが幅に収まりきらない場合に限定した改行方法*/
word-wrap: break-word;
overflow-wrap: break-word;
/*余分な字間を字詰めする。これとは別にあえて字間もアリ*/
font-feature-settings: "palt";
/*↓字間の調整*/
letter-spacing: 0.05em;
/*↓背景*/
background-color: #fff;
}
@media (min-width: 768px) {
body {
line-height: 2;
}
}
@media (min-width: 1441px) {
body {
font-size: calc(100vw/(1441/16));
}
}
/*ローディング
------------------------------------------------------------*/
.loading {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 99999;
background: #f9feff;
display: table;
visibility: visible;
}
/*---アニメーションの位置---*/
.animation {
text-align: center;
vertical-align: middle;
display: table-cell;
}
.animation img {
height: 150px;
width: 150px;
opacity: 0; /* 最初は透明 */
transform: translateY(50px); /* 下に少しずらす */
animation: fadeInUp 0.5s ease-out 0.5s forwards; /* フェードイン＋下から入ってくる */
}
@media (min-width: 768px) {
.animation img {
height: 250px;
width: 250px;
}
}
/* フェードイン＋下から入ってくるアニメーション */
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*ヘッダー・ナビレイアウト
------------------------------------------------------------*/
header {
width: 100%;
height: 60px;
margin: 0;
top: 0;
padding: 0;
background-color: #FFF;
box-shadow: rgba(0,0,0, 0.03) 0 3px 8px 0;/*filter: drop-shadowはスマホメニューがきれる*/
position: fixed;
z-index: 9999;
/**/
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.site-head {
margin: 0;
padding: 0;
}
.site-id {
}
.site-id img {
margin-top: 10px;
margin-left: 15px;
max-width: 142px;
max-height: 40px;
}
.site-id .slogan {
display: none;
}
/*右側のsub-menu1とglobal_menuを囲む*/
.site-navs {
}
.sub-menu1 {
display: none;
}
.contact2 a {
width: 60px;
height: 60px;
color: #fff!important;
font-weight: 600;
font-size: 1.0rem;
line-height: 1;
text-align: center;
cursor: pointer;
background-color: #1877f7;
right: 60px;
z-index: 10;
border: 1px solid #1877f7;
position: absolute;
padding-top: 22px;
}
/*---ノートPC以上---*/
@media (min-width: 1241px) {
header {
height: 88px;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
transition: .5s;
/**/
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
/*site-idとsloganを囲む*/
.site-head {
width: 40%;/*★*/
margin: 0;
padding: 0;
}
.site-id {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.site-id img {
margin-top: 16px;
margin-left: 30px;
max-width: 199px;
max-height: 56px;
}
.site-id .slogan {
display: block;
font-size: 10px;
color: #1d98ff;
margin-left: 15px;
margin-top: 16px;
}
/*右側のsub-menu1とglobal_menuを囲む*/
.site-navs {
width: 60%;/*★*/
}
.sub-menu1 {
width: 100%;
display: flex;
justify-content: right;
flex-wrap: nowrap;
align-items: center;
margin-top: 14px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-right: 30px;/*☆*/
}
.news1 a, .english1 a {
font-size: 13px;
color: #6e829d;
font-weight: 600;
line-height: 1;
text-align: center;
display: block;
border-radius: 50vh;
cursor: pointer;
padding-top: 6px;
padding-right: 15px;
padding-bottom: 8px;
padding-left: 15px;
margin: 0;
background-color: #fff;
transition: .5s;
}
.news1 a:hover, .english1 a:hover {
color: #1d98ff;
background-color: #f9feff;
}
.tel1 {
font-size: 22px; /* テキスト高さ基準 */
height: 22px; /* 親の高さ指定 */
line-height: 22px; /* 文字の垂直中央 */
font-weight: 600;
margin-top: 0;
margin-right: 0;
margin-bottom: 3px;
margin-left: 10px;
padding: 0;
}
.tel1 a {
color: #1877f7;
}
.tel1 a:hover {
color: #1d98ff;
}
.tel1 img {
height: 26px!important;
width: auto;
margin-right: 2px;
margin-top: -5px;
vertical-align: middle;
}
.contact1 a {
font-size: 13px;
color: #fff!important;
font-weight: 600;
line-height: 1;
text-align: center;
display: block;
border-radius: 50vh;
cursor: pointer;
filter: drop-shadow(0 3px 3px rgba(0,0,0,0.15));
transition: .5s;
padding-top: 6px;
padding-right: 15px;
padding-bottom: 8px;
padding-left: 15px;
margin-left: 15px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
background-color: #1877f7;
}
.contact1 a:hover {
background-color: #1d98ff;
}
.contact2 a {
display: none;
}
}
/*ナビレイアウト
------------------------------------------------------------*/
/* スマホ閲覧時のハンバーガーメニュー */
/* チェックボックスを非表示 */
#hanburger {
display: none;
}
/* ボタンのスタイル(（文字は別途下のもので設定） */
.menu_button {
width: 60px;
height: 60px;
font-size: 1.1rem;
line-height: 1;
text-align: center;
cursor: pointer;
background-color: #1d98ff;
position: fixed;
right: 0;
z-index: 10;
border: 1px solid #1d98ff;
}
/* ボタン文字のスタイル（チェック前）*/
.menu_button::before {
content: "menu"; /* ボタン文字*/
font-weight: 600;
position: absolute;
color: #fff!important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* ボタン文字のスタイル（チェック済み） */
#hanburger:checked + .menu_button::before {
content: "×"; /* ボタン文字*/
}
/* メニュー全体のスタイル */
.global_menu {
visibility: hidden; /* メニューを非表示 */
width: 100%;
height: 100%;/*PCのときはこれをリセットする*/
left: 0;
right: 0;
top: 60px;
margin: 0;
overflow-y: scroll;
background-color: #f9feff; /* 背景色 */
position: fixed;
padding-top: 4%;
padding-right: 4%;
padding-bottom: 100px;
padding-left: 4%;
}
/* メニュー全体のスタイル（チェック済） */
#hanburger:checked ~ .global_menu {
visibility: visible; /* メニューを表示 */
}
/*お知らせ*/
.sub-menu2 li {
display: block;
}
/* 各メニューのスタイル（ホバー前） */
.global_menu a {
display: block;
width: auto;
color: #243751;
white-space: nowrap;
position: relative;
line-height: 1;
}
/*親子のデフォルトリストリセット*/
.global_menu ul {
list-style-type: none;
padding: 0;
}
/* 親メニューのみのスタイル */
.menu > a {
font-weight: 600;
padding: 15px 0 15px 25px;
}
/* 親メニューのポッチ */
.menu > a::before {
display: block;
content: "";
position: absolute;
top: 18px;
left: 10px;
width: 6px;
height: 6px;
border-top: solid 1px #1877f7;
border-right: solid 1px #1877f7;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/*画像*/
.mega1 {
display: none;
}
/* 子メニューのスタイル */
.mega2 > li > a {
padding: 15px 0 15px 45px;
}
/* 子メニューのポッチ */
.mega2 > li > a::before {
display: block;
content: "";
position: absolute;
top: 18px;
left: 30px;
width: 6px;
height: 6px;
border-top: solid 1px #1877f7;
border-right: solid 1px #1877f7;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
@media screen and (min-width: 1241px) {
/* PC閲覧時のメガメニュー */
.menu_button {
display: none; /* ハンバーガーメニューのボタンを非表示 */
}
/* メニュー全体のスタイル */
.global_menu {
position: relative;
padding: 0;
text-align: center;
background-color: transparent;/* 背景透明色 */
visibility: visible;
overflow-y: visible;
top: 0;
font-size: 0; /*親メニュー同士の隙間を消すため必須*/
letter-spacing: 0;/*親メニュー同士の隙間を消すため必須*/
margin-top: 5px;
height: auto;/*変な高さをリセット*/
}
/*お知らせ*/
.sub-menu2 li {
display: none;
}
/*親メニュー横並び*/
.global_menu > ul {
display: flex;
flex-wrap: nowrap;
justify-content: flex-end;
padding-right: 15px;/*☆*/
}
.menu {
position: relative;/*.mega子メニューと画像のセット位置のため必須★*/
}
/*段落の一番最後の余白*/
.menu:last-child {
margin-bottom: 0;
}
/* 親メニューのみのスタイル */
.menu > a {
font-size: 1.6rem;
line-height: 1;
margin: 0;
/*display: block;*/
background-color: transparent;
transition: .5s;
padding-top: 7px;
padding-right: 15px;
padding-bottom: 8px;
padding-left: 15px;
}
.menu:hover > a {
display: block;
color: #1d98ff;
background-color: #f9feff;
border-radius: 50vh;
}
/* 親メニューのポッチ 非表示.、親メニューのスタイル 左線*/
.menu > a::before {
top: 10px;
left: -1px;
height: 14px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
border-top: 0;
border-right: 0;
border-left: 0;
}
/* 親メニューのスタイル 一番右だけ線*/
.global_menu > ul > li:last-of-type > a::after {
display: block;
content: "";
position: absolute;
top: 10px;
left: 0;
right: 0;
height: 14px;
border-right: 0;
}
/* 子メニューと画像のセットのスタイル */
.mega {
width: 600px;
right: 0;
top: 1px;
padding-top: 30px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 30px;
position: absolute;
background-color: #f9feff;
border-radius: 15px;
visibility: hidden;
opacity: 0;
filter: drop-shadow(0 3px 3px rgba(0,0,0,0.15));
transition: 0.5s top, 0.5s opacity;
display: flex;
flex-wrap: nowrap;
}
/* 下層メニューのスタイル（親メニューover時） */
.menu:hover .mega {
top: 100%;
opacity: 1;
visibility: visible;
transition: 0.5s;
}
/* フェードアウト時に上に移動する距離を30%分だけ減らす */
.mega:not(:hover) {
top: 50px; /* 上に30pxだけ移動 */
opacity: 0;
visibility: hidden;
transition: 0.5s;
}
/*画像入れる枠*/
.mega1 {
width: 200px;
display: block;
}
/*画像*/
.mega1 img {
width: 100%;
height: auto;
border-radius: 15px;
filter: drop-shadow(0 3px 3px rgba(0,0,0,0.15));
margin-bottom: 10px;
}
/*ボタンを入れる枠*/
.mega2 {
width: 340px;
margin-left: 10px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;/*ボタン群が範囲内で上に詰まる*/
}
.mega2 > li {
flex-grow: 1;/*範囲の中でいい具合に伸びる*/
}
/* 子メニューのスタイル（out） */
.mega2 > li > a {
color: #1877f7;
min-width: 100px;
margin-bottom: 10px;
margin-right: 10px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
display: block;
font-weight: 600;
font-size: 1.4rem;
line-height: 1;
white-space: nowrap;
letter-spacing: 0.05em;
background-color: #f9feff;
border: 1px solid #b9d6fd;
filter: drop-shadow(0 2px 3px rgba(0,0,0,0.05));
border-radius: 50vh;
transition: .5s;
}
/* 子メニューのスタイル（over） */
.mega2 > li > a:hover {
color: #1d98ff;
background-color: #f9feff;
border: 1px solid #1d98ff;
border-radius: 50vh;
}
/* 子メニューのポッチ非表示 */
.mega2 > li > a::before {
display: none;
}
}
/*ページコンテンツ枠
------------------------------------------------------------*/
main {
width: 100%;
height: auto;
padding-top: 60px;
}
main::after {/*overflow: hidden;の代わりに.clearfix::after*/
content: "";
clear: both;
display: block;
}
@media (min-width: 1241px) {
main {
padding-top: 88px;
}
}
article {/*特に指定なし*/
}
/*段落
------------------------------------------------------------*/
section {
width: auto;
height: auto;
padding-top: 5em;
padding-bottom: 5em;
margin-right: 6%;
margin-left: 6%;
transform: translateY(50px);
transition: .5s;
}
/* 最初の section のみ上マージンを上書き */
section:first-of-type {
padding-top: 3em;
}
/*section 要素の直下にある要素に対して、上マージン0にする*/
section > *:first-child {
margin-top: 0;
}
@media (min-width: 1100px) {
section {
width: calc(100vw / (1441 /840));
padding-top: calc(100vw / (1441 / 80));/*余白はpaddingに！*/
padding-bottom: calc(100vw / (1441 /80));
margin-right: auto;
margin-left: auto;
}
/* 最初の section のみ上マージンを上書き */
section:first-of-type {
padding-top: calc(100vw / (1441 / 80));/*余白はpaddingに！*/
}
}
/*--section幅以上にブラウザ幅で下に線--*/
section {
position: relative;
}
section::before {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #d6d2c6;
position: absolute;
top: 0;
left: 0;/*-50vwにするとブラウザ幅の線になる*/
right: 0;/*-50vwにするとブラウザ幅の線になる*/
bottom: 0;
z-index: -1;
content: "";
}
section:last-of-type::before {
border-bottom-width: 0!important;
}
/*見出しの基本文字サイズ
------------------------------------------------------------*/
/*mainの中の指定。装飾は別指定*/
main h1, main h2, main h3, main h4, main h5 {
font-weight: 600;
width: auto;
height: auto;
line-height: 1.2;
}
@media (min-width: 768px) {
main h1, main h2, main h3, main h4, main h5 {
line-height: 1.6;
}
}
main h1 {
color: #fff;
}
main h2, main h3, main h4, main h5 {
color: #202226;
}
/*1emが文字の高さ。それ基準の余白。PC、スマホでもいい感じ*/
main h2 {
margin-top: 3em;
margin-bottom: 1.5em;
clear: both;
}
main h3, main h4, main h5 {
margin-top: 2.6em;
margin-bottom: 1.3em;
}
@media (min-width: 768px) {
main h2, main h3, main h4, main h5 {
margin-top: 2.2em;
margin-bottom: 0.8em;
}
}
main h3 + .list1, main h4 + .list1, main h5 + .list1 {
margin-top: -0.8em!important;
}
/*---見出し直後のグリッドの上の余白---*/
main h3 + .grid_s1-m2, main h4 + .grid_s1-m2, main h5 + .grid_s1-m2, main h3 + .grid_s1-m3, main h4 + .grid_s1-m3, main h5 + .grid_s1-m3, main h3 + .category-wrap, main h4 + .category-wrap, main h5 + .category-wrap {
margin-top: 1.0em!important;/**/
}
/*---グリッドのli毎の下の余白---*/
h4 + .grid_s1-m2 > ul, h4 + .grid_s1-m2bl > ul, h4 + .grid_s1-m2br > ul, h4 + .grid_s1-m3 > ul, h4 + .grid_2 > ul, h4 + .grid_s2-m3 > ul, h4 + .grid_s2-m4 > ul {
gap: 1.0em!important; /* 行と列の両方に余白 */
}
/*ニュースの日付の次に来る見出しの上の余白を1emにする*/
main .date + h2, main .date + h3, main .date + h4, main .date + h5 {
margin-top: 1em;
}
/*fontのサイズ*/
main h1 {
font-size: 3.2rem;
}
main h2 {
font-size: 2.4rem;
}
main h3 {
font-size: 2.0rem;
}
main h4 {
font-size: 1.8rem;
}
main h5 {
font-size: 1.6rem;
}
@media (min-width: 768px) {
main h1 {
font-size: 4.1rem;
}
main h2 {
font-size: 2.9rem;
}
main h3 {
font-size: 2.3rem;
}
main h4 {
font-size: 1.9rem;
}
main h5 {
font-size: 1.7rem;
}
}
@media (min-width: 1241px) {
main h1 {
font-size: calc(100vw/(1441/50));
}
main h2 {
font-size: calc(100vw/(1441/34));
}
main h3 {
font-size: calc(100vw/(1441/26));
}
main h4 {
font-size: calc(100vw/(1441/20));
}
main h5 {
font-size: calc(100vw/(1441/18));
}
}
/*見出しの装飾
------------------------------------------------------------*/
/*記事タイトル飾り専用*/
/*h1かざり 記事タイトル飾り専用*/
#title-wrap {
width: auto;
height: auto;
margin: 0;
padding: 0;
background-color: #f0fdff;
background-image: url(../img/sample02.jpg);/*アイキャッチが入るWPではhtmlに直書き*/
/*background-image: url(../img/noimage-title.svg);アイキャッチが入るWPではhtmlに直書き*/
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
z-index: 0;
overflow: hidden;/*ブラー効果でボヤけた部分を非表示*/
}
#title-wrap::before {
content: '';
position: absolute;
z-index: -1;/*重なり順序を一番下にしておく*/
background: inherit;/*.title-wrapで設定した背景画像を継承する*/
filter: blur(7px) brightness(50%);
/*ブラー効果で画像の端がボヤけた分だけ位置を調整*/
top: -7px;
left: -7px;
right: -7px;
bottom: -7px;
}
#title-wrap #title {
min-height: calc(100vw / (1441 / 150));
margin: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
padding-top: calc(100vw / (768 / 60));
padding-bottom: calc(100vw / (768 / 60));
padding-right: 4%;
padding-left: 4%;
}
@media (min-width:768px) {
#title-wrap::before {
filter: blur(0) brightness(50%);
}
#title-wrap #title {
padding-top: calc(100vw / (1241 / 30));
padding-bottom: calc(100vw / (1241 / 30));
}
}
@media (min-width: 1921px) {
#title-wrap #title {
min-height: calc(100vw / (1921 / 150));
}
}
/* h4 の飾り */
main h4 {
/* 左側に余白を作って、文字が棒と重ならないように */
padding-left: 0.8em;
position: relative;
}
/*（青い縦線）の設定 */
main h4::before {
content: "";
position: absolute; /* h4 を基準に配置 */
left: 0; /* 左端に合わせる */
top: 0;
bottom: 0; /* 高さは h4 の高さに合わせる */
width: 5px; /* 棒の太さ */
background-color: #1d98ff; /* 青色*/
border-radius: 5px;
}
/*ページ下部のお問い合わせセット
------------------------------------------------------------*/
.item {
width: 100%;
height: auto;
padding-top: 5em;
padding-bottom: 5em;
padding-right: 3%;
padding-left: 3%;
margin: 0;
background-color: #fff;
position: relative;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #d6d2c6;
text-align: center;
color: #1877f7;
font-weight: 600;
}
@media (min-width: 1100px) {
.item {
padding-top: calc(100vw / (1441 / 80));/*余白はpaddingに！*/
padding-bottom: calc(100vw / (1441 /80));
}
}
/*ご相談から納品までの流れの上部用*/
section .item {
width: auto;
height: auto;
padding-top: 37px;
padding-bottom: 37px;
margin: auto;
position: relative;
border-top-width: 0!important;
}
.item .tel {
font-size: 36px; /* テキスト高さ基準 */
height: 36px; /* 親の高さ指定 */
line-height: 36px; /* 文字の垂直中央 */
font-weight: 600;
margin-top: 15px;
margin-right: 0;
margin-bottom: 3px;
margin-left: 10px;
padding: 0;
}
.item .tel a {
color: #1877f7;
}
.item .tel img {
height: 36px!important;
width: auto;
margin-right: 2px;
margin-top: -5px;
vertical-align: middle;
}
@media (min-width: 768px) {
.item {
padding-top: calc(100vw/(768/60));
padding-bottom: calc(100vw/(768/60));
padding-right: 6%;
padding-left: 6%;
transform: translateY(50px);
transition: .5s;
}
.item .tel a:hover {
color: #1d98ff;
}
}
@media (min-width: 1241px) {
.item {
padding-right: 12%;
padding-left: 12%;
padding-top: 60px;
padding-bottom: 60px;
}
}
.item::after {/*overflow: hidden;の代わりに.clearfix::after*/
content: "";
clear: both;
display: block;
}
/* フッター
------------------------------------------------------------*/
.page-footer {
width: auto;
height: auto;
padding-top: 5em;
padding-bottom: 5em;
padding-right: 3%;
padding-left: 3%;
background-color: #e8fbff;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #d6d2c6;
}
.page-footer {
text-align: center;
}
@media (min-width: 768px) {
.page-footer {
text-align: left;
}
}
@media (min-width: 1100px) {
.page-footer {
padding-top: calc(100vw / (1441 / 80));/*余白はpaddingに！*/
padding-bottom: calc(100vw / (1441 /80));
}
}
@media (min-width: 1241px) {
.page-footer {
transform: translateY(50px);
transition: .5s;
}
}
.f_logo {
text-align: center;
}
.f_logo img {
max-width: 142px;
max-height: 40px;
margin-bottom: 0;
}
@media (min-width: 768px) {
.f_logo {
text-align: left;
}
.f_logo img {
max-width: 250px;
max-height: 71px;
}
}
/*---サイトマップ---*/
.sitemap ul {
display: flex;
justify-content: center;
flex-wrap: wrap; /* liのセットを改行可能に */
list-style: none; /* デフォルトのマーカーを消す */
padding: 0; /* デフォルトのパディングを消す */
}
.sitemap li {
white-space: nowrap; /* li内の文字は改行しない */
margin: 0 0 15px 15px; /* 上:15px、右:0、下:0、左:15px */
}
.sitemap li a {
color: #1877f7;
text-decoration: none;
transition: .5s;
}
@media (min-width: 768px) {
.sitemap ul {
justify-content: flex-end; /* 右寄せ */
}
.sitemap li a:hover {
color: #1d98ff;
text-decoration: underline;
}
}
.sitemap li a:active {
color: #1877f7;
}
/*---サイト内検索---*/
.kensaku {
text-align: center;
margin-top: 15px;
}
@media (min-width: 768px) {
.kensaku {
text-align: right;
}
}
/*---住所表示---*/
.jusho_s1-m2 ul {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 30px;
max-width: 330px; /* 全体を中央寄せ */
margin-top: 30px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.jusho_s1-m2 li {
color: #6e829d;
text-align: left;
width: fit-content; /* 文字幅に合わせる */
min-width: 100%; /* セル幅いっぱいに広がる */
}
.jusho_s1-m2 a {
color: #6e829d;
text-decoration: none;
}
/* デスクトップ（768px以上）では横並び */
@media (min-width: 768px) {
.jusho_s1-m2 ul {
max-width: 700px;
grid-template-columns: 1fr 1fr; /* 2列 */
font-size: 1.6rem;/*16pxと同等*/
}
.jusho_s1-m2 a:hover {
text-decoration: underline;
}
}
.copyright {
color: #6e829d;
text-align: center;
font-weight: 600;
margin-top: 30px;
}
/*共有部品
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*本文
------------------------------------------------------------*/
main p {
margin-top: 1.0em;
margin-right: 0;
margin-bottom: 1.8em;
margin-left: 0;
}
/* section の直下にあり、かつ section の最後の子要素である のみ
「
えええ
と の間に何も入っていない」場合だけ作用*/
section > p:last-child {
margin-bottom: 0; /* ここで上書き */
}
/*リンク
------------------------------------------------------------*/
main a {
color: #1877f7;/*text-decoration: none;*/
transition: .5s;
}
main p a, main p a:visited, .u_line {
color: #1877f7;
transition: .5s;
}
@media (min-width: 768px) {
main a:hover, main p a:hover, .u_line:hover {
color: #1d98ff;
}
main p a:hover, .u_line:hover, table a:hover, .list0 a:hover, .list1 a:hover, .list2 a:hover {
text-decoration: underline;
}
/*pの中のボタンに線が出るのを解除*/
main p a.button:hover, main p a.button_toi:hover {
text-decoration: none;
}
}
main a:active {
color: #1877f7;
}
/*画像
------------------------------------------------------------*/
/*---画像基本---*/
img {
max-width: 100%;
height: auto!important;
vertical-align: bottom;
}
a img {
max-width: 100%;
height: auto;
background: none;
box-shadow: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: .5s;
}
@media (min-width: 768px) {
/*---画像をmouseoverしたとき薄くなる---*/
a:hover img {
opacity: 0.8;
filter: alpha(opacity=80);
background: none!important;
}
}
section a img {
/* width: 100%; 親要素に合わせる */
aspect-ratio: 3 / 2; /* 幅3：高さ2 の比率 */
object-fit: cover; /* 画像を枠内に切り取り */
border-radius: 15px; /* 角を丸く */
filter: drop-shadow(0 3px 3px rgba(0,0,0,0.15));
transition: all 0.5s ease; /* 全てのアニメーション */
display: block; /* 画像の下に余白が入るのを防ぐ */
margin-bottom: 10px; /* 画像とテキストの間隔 */
border: 2px solid #e1e1e1;
}
@media (min-width: 768px) {
section a:hover img {
opacity: 0.8; /* ホバー時に50％薄く */
border: 2px solid #1d98ff; /* ホバー時に青いボーダー */
border-radius: 15px; /* 角を丸く */
}
}
/*---画像にボーダーをあえてつけたいとき---*/
.img_boader {
border: 1px solid #d6d2c6;
}
/*---panelの中で画像の幅を画像自体のサイズにする---*/
.img-clear {
width: auto!important;
max-width: 100%!important;
height: auto!important;
vertical-align: bottom;/*画像の下のすきま防止*/
}
/*配置場所
------------------------------------------------------------*/
/*画像や枠をセンター*/
.center, .center img {
margin-right: auto;
margin-left: auto;
}
.s_center {
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.s_center {
margin-right: 0;
margin-left: 0;
}
}
/*文字をセンター*/
.txt_center {
text-align: center!important;
}
/*文字を左よせ強制*/
.txt_left {
text-align: left!important;
}
/*写真の回り込み
------------------------------------------------------------*/
/*---左回り込み---*/
.fl {
float: left;
margin-right: 3%;
clear: both;
display: block;
margin-bottom: 3%;
}
/*---右回り込み---*/
.fr {
float: right;
margin-left: 3%;
display: block;
clear: both;
margin-bottom: 3%;
}
@media (min-width: 768px) {
.fl,.fr {
margin-top: 0.5em;
}
}
.fl img, .fr img {
max-width: 100%;
max-height: 100%;
display: block;
clear: both;
}
/*SPとPCでの表示切替
------------------------------------------------------------*/
/*---スマホだけ非表示 767px以下小さいときに非表示にする---*/
@media (max-width:767px) {
.s_non {
display: none;
}
}
/*---スマホとタブレットを非表示 1240px以下に非表示にする---*/
@media (max-width:1240px) {/*1240px以下*/
.sm_non {
display: none;
}
}
/*---タブレットとPC非表示 768px以上に非表示にする---*/
@media (min-width: 768px) {
.mp_non {
display: none;
}
}
/*---PCだけ非表示 1280px以上に非表示にする---*/
@media (min-width: 1241px) {
.p_non {
display: none;
}
}
/*アンカーリンク
------------------------------------------------------------
アンカーリンク先のh2の直前などにdivで設置する。
すでに上の方でmainの上に余白を入れてある。
main {padding-top: 54px;}
@media (min-width: 1441px) {
main {padding-top: 70px;}}
これを相殺する。
--以下のように記述する。
見出し
*/
.anchor-jump {
padding-top: 70px;/**/
margin-top: -70px;
font-size: 0;
line-height: 0;
}
/*電話のリンク
------------------------------------------------------------*/
a[href^="tel:"] {
/*text-decoration: underline;*/
text-decoration: none;
}
.page-footer a[href^="tel:"] {
}
@media (min-width: 768px) {
a[href^="tel:"] {
/* pointer-events: none;*/
transition: .5s;
}
}
/*Googleリキャプチャを非表示にする方法（フォームのあるページに別途
Google利用規約とプライバシーポリシーポリシーに適応されると追記する必要がある）
-----------------------------------------------------------*/
.grecaptcha-badge {
visibility: hidden;
}
/*回り込み停止
------------------------------------------------------------*/
.clearfix {
clear: both!important;
display: block!important;
}
/*各種文字サイズ
------------------------------------------------------------*/
/*各サービスのキャッチフレーズ*/
/*.catchcopy {
font-size: 2.6rem;
}*/
.txt_s, .txt_s-b, .txt_s-g {
font-size: 1.1rem;
}
.txt_s-g {
color: #6e829d;
}
.txt_m, .txt_m-b {
font-size: 1.8rem;
}
.txt_l, .txt_l-b {
font-size: 2.0rem;
}
.catchcopy, .txt_s-b, .txt_m-b, .txt_l-b, b, strong {
font-weight: 600;
}
sup {
font-size: 1.1rem;
vertical-align: top;
}
.date {
color: #6e829d;
margin-bottom: 3em;
}
@media (min-width: 768px) {
/*.catchcopy {
font-size: 3.1rem;
}*/
.txt_s, .txt_s-b, .txt_s-g {
font-size: 1.2rem;
}
.txt_m, .txt_m-b {
font-size: 1.9rem;
}
.txt_l, .txt_l-b {
font-size: 2.3rem;
}
sup {
font-size: 1.2rem;
}
}
@media (min-width: 1241px) {
/*.catchcopy {
font-size: calc(100vw/(1441/36));
}*/
.txt_s, .txt_s-b, .txt_s-g {
font-size: calc(100vw/(1441/13));
}
.txt_m, .txt_m-b {
font-size: calc(100vw/(1441/20));
}
.txt_l, .txt_l-b {
font-size: calc(100vw/(1441/26));
}
sup {
font-size: calc(100vw/(1441/13));
}
}
/*各種文字色など（サイズ指定なし）
------------------------------------------------------------*/
.txt_bold {
font-weight: 600;
}
.point_line {
font-weight: 600;
background: linear-gradient(transparent 60%, #d8fbff 60%);
}
/*対応サービスと必須項目
------------------------------------------------------------*/
.ico_def, .ico_hissu {
font-size: 1.1rem;
font-weight: 600!important;
line-height: 1;/**/
text-decoration: none;
text-align: center;
white-space: nowrap;
letter-spacing: 0.1em;
height: auto;
width: auto;
border-radius: 50vh;
overflow: hidden;
clear: both;
padding-top: 0.2em;
padding-bottom: 0.4em;
padding-right: 1em;
padding-left: 1em;
color: #FFF;/*display: block;*/
margin-top: 0.3em;
margin-right: 0.6em;
margin-bottom: 0.3em;
margin-left: 0;
}
.ico_def {/*デフォルト*/
background-color: #C2BB9A;
}
.ico_hissu {/*必須項目*/
background-color: #1d98ff;
}
@media (min-width: 768px) {
.ico_def, .ico_hissu {
font-size: 1.2rem;
}
}
@media (min-width: 1241px) {
.ico_def, .ico_hissu {
font-size: 1.3rem;/*font-size: calc(100vw/(1441/12));*/
}
}
@media (min-width: 1441px) {
.ico_def, .ico_hissu {
font-size: calc(100vw/(1441/13));
}
}
/*確認しましたスパム除けの非表示*/
.kakunin-f {
display: none;
}
/*パンくずリストの囲み（中身はプラグイン自動生成）
------------------------------------------------------------*/
.breadcrumbs-wrap {
border-radius: 15px;
background-color: #f0fdff;
padding-top: 0.5em;
padding-right: 1em;
padding-bottom: 0.5em;
padding-left: 1em;
margin-top: 50px!important;
}
.breadcrumbs-wrap a {
color: #1877f7;
transition: .5s;
}
@media (min-width: 768px) {
.breadcrumbs-wrap a:hover {
color: #1d98ff;
text-decoration: underline;
}
}
/*カテゴリ
------------------------------------------------------------*/
/*---リンクナシのカテゴリ（画像とテキストと一緒に一覧で使うもの）---*/
.category {
color: #6e829d;
font-size: 1.1rem;
text-decoration: none;
text-align: center;
white-space: nowrap;
letter-spacing: 0.1em;
border-radius: 50vh;
line-height: 1.2;
min-height: 2.0em;
padding-top: 0.1em;
padding-bottom: 0.2em;
padding-right: 1em;
padding-left: 1em;
margin-top: 0.3em;
margin-right: 0.6em;
margin-bottom: 0.6em;
margin-left: 0;
background-color: #f4f2eb;
transition: .5s;
display: inline-flex; /* これで内容に合わせた幅になる */
align-items: center;
justify-content: center;
/* 横に100%になるのを防ぐ */
width: fit-content;
}
@media (min-width: 768px) {
.category {
font-size: 1.2rem;
}
}
@media (min-width: 1441px) {
.category {
font-size: calc(100vw/(1441/13));
}
}
/*--button-categoryをまとめるものカテゴリ用---*/
.category-wrap {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 0.8em 0.8em;
}
/* カテゴリボタン（単独でも使える） */
a.button-category, .button-category a {
color: #1877f7;
font-size: 1.1rem;
width: fit-content;
min-width: fit-content;
text-decoration: none;
text-align: center;
white-space: nowrap;
letter-spacing: 0.1em;
border-radius: 50vh;
cursor: pointer;
line-height: 1.2;
min-height: 2.2em;
padding-top: 0.1em;
padding-bottom: 0.2em;
padding-right: 1em;
padding-left: 1em;
border: 2px solid #b9d6fd;
background-color: #f9feff;
transition: .5s;
filter: drop-shadow(0 2px 3px rgba(0,0,0,0.07));
display: inline-flex;
align-items: center;
justify-content: center;
}
@media (min-width: 768px) {
a.button-category, .button-category a {
font-size: 1.2rem;
}
a.button-category:hover, .button-category a:hover {
color: #1d98ff;
border: 2px solid #1d98ff;
background-color: #f9feff;
}
}
@media (min-width: 1441px) {
a.button-category, .button-category a {
font-size: calc(100vw/(1441/13));
}
}
a.button-category .here, .button-category a .here {/*タブのように使うとき今いるページを色付けする*/
color: #FFF!important;
background-color: #1d98ff!important;
}
/*ボタン
------------------------------------------------------------*/
/*---もっと見るボタン---*/
/*書き方
もっと見るボタン
*/
a.button {
min-width: 320px;
color: #1877f7;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
text-align: center;
letter-spacing: 0.1em;
border-radius: 50vh;
cursor: pointer;
position: relative;
padding-top: 15px;
padding-right: 50px; /* 矢印の分だけ右側を広げる */
padding-bottom: 15px;
padding-left: 50px;
margin-top: 37px;
border: 2px solid #b9d6fd;
background-color: #f9feff;
filter: drop-shadow(0 3px 3px rgba(0,0,0,0.07));
/*display: inline-block;*/
display: block;
width: fit-content;
transform: translateY(50px);
transition: .5s;
}
/*コントロールエリアのボタンだけ上の余白を小さく*/
h4 + .grid_s1-m2 + a.button {
margin-top: 1.0em;
}
.item a.button, li a.button {
display: inherit;
}
@media (min-width: 768px) {
a.button:hover {
color: #1d98ff;
border: 2px solid #1d98ff;
background-color: #f9feff;
}
}
@media (min-width: 1441px) {
a.button {
padding-top: calc(100vw/(1441/15));
padding-right: calc(100vw/(1441/50)); /* 矢印の分だけ右側を広げる */
padding-bottom: calc(100vw/(1441/15));
padding-left: calc(100vw/(1441/50));
}
}
/* 矢印：中央に配置 */
a.button:before {
content: "";
position: absolute;
top: 50%; /* 垂直方向中央に */
right: 25px;
width: 8px;
height: 8px;
border-top: solid 2px #1877f7;
border-right: solid 2px #1877f7;
transform: rotate(45deg) translateY(-50%); /* 傾けつつ、中央に補正 */
transition: .3s ease-in-out;
}
@media (min-width: 768px) {
a.button:hover:before {
right: 20px;
}
}
/*ボタンを枠の底に固定するため*/
li.btn-bottom {/*入っているliにクラス*/
display: flex;
flex-direction: column;
}
li.btn-bottom > a.button {
margin-top: 2%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
@media (min-width: 768px) {
li.btn-bottom > a.button {
margin-top: auto;
margin-left: auto;
margin-right: 0;
}
}
/*---お問い合わせボタン---*/
/*書き方
もっと見るボタン
*/
a.button_toi {
min-width: 320px;
color: #fff;
font-weight: 600;
font-size: 2.0rem;
line-height: 1.4;
text-decoration: none;
text-align: center;
letter-spacing: 0.1em;
border-radius: 50vh;
cursor: pointer;
position: relative;
padding-top: 25px;
padding-right: 60px; /* 矢印の分だけ右側を広げる */
padding-bottom: 25px;
padding-left: 60px;
background-color: #1877f7;
filter: drop-shadow(0 3px 3px rgba(0,0,0,0.2));
/*display: inline-block;*/
display: block;
width: fit-content;
transform: translateY(50px);
transition: .5s;
}
.item a.button_toi, li a.button_toi {
display: inherit;
}
@media (min-width: 768px) {
a.button_toi:hover {
color: #fff;
background-color: #1d98ff;
}
}
/* 矢印：中央に配置 */
a.button_toi:before {
content: "";
position: absolute;
top: 50%; /* 垂直方向中央に */
right: 25px;
width: 8px;
height: 8px;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
transform: rotate(45deg) translateY(-50%); /* 傾けつつ、中央に補正 */
transition: .3s ease-in-out;
}
@media (min-width: 768px) {
a.button_toi:hover:before {
right: 20px;
}
}
@media (min-width: 1441px) {
a.button_toi {
font-size: calc(100vw/(1441/22));
padding-top: calc(100vw/(1441/25));
padding-right: calc(100vw/(1441/60)); /* 矢印の分だけ右側を広げる */
padding-bottom: calc(100vw/(1441/25));
padding-left: calc(100vw/(1441/60));
}
}
/*枠の中で自由に横並び*/
.btn_wrap {
width: 100%;
display: flex;
flex-wrap: wrap;
align-content: flex-start;/*ボタン群が範囲内で上に詰まる*/
gap: 20px; /* 行と列の余白 */
}
.btn_wrap .button, .btn_wrap .button_toi {
flex: 0 0 auto; /* 伸縮しない */
width: calc(33% - 10px); /* 1行に3列並べる場合 */
margin-top: 0;/* ボタンに仕込んであるmargin-top: 37px;を消す*/
}
/*---ページ下部のボタン群でどれかのボタン無くなったすきま用---*/
.button_spacer {
width: auto;
line-height: 1.4;
display: block;
padding: 15px;
}
/*---アコーディオン 料金表など用---*/
.acMenu {
margin-bottom: 3%;
}
.acMenu:last-of-type {
margin-bottom: 0;
}
.acMenu .acbutton {
font-weight: 600;
color: #1877f7!important;
line-height: 1.4;
text-decoration: none;
text-align: center;
letter-spacing: 0.1em;
display: block;
border-radius: 15px 20px 0 0;
cursor: pointer;
margin-right: auto;
margin-left: auto;
padding: 10px;
background-color: #f9feff;
filter: drop-shadow(0 3px 3px rgba(0,0,0,0.15));
border-top-width: 2px;
border-right-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #b9d6fd;
border-right-color: #b9d6fd;
border-left-color: #b9d6fd;
transition: .5s;
}
.acMenu .acbutton {
width: 80%;
}
@media (min-width: 768px) {
.acMenu .acbutton {
width: 65%;
}
}
@media (min-width: 1241px) {
.acMenu .acbutton {
width: 50%;
}
}
.acMenu .bar {
width: 100%;
height: 1px;
background-color: #d6d2c6;
display: block;
filter: drop-shadow(0 3px 3px rgba(0,0,0,0.15));
}
@media (min-width: 768px) {
.acMenu .acbutton:hover {
color: #1d98ff!important;
background-color: #f9feff;
border-top-width: 2px;
border-right-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #1877f7;
border-right-color: #1877f7;
border-left-color: #1877f7;
}
}
.acMenu .acbutton::before {
content: "▼";
}
.acMenu .accmt {
width: 100%;
/*margin-bottom: 10px;*/
display: none;
background-color: #FFF;
border: 1px solid#1877f7;
padding: 3%;
border-radius: 15px;
}
/*---SNSsharerボタン---*/
.sharers {
margin-top: 1%;
margin-bottom: 1%;
font-size: 1.4rem!important;
line-height: 1!important;
width: auto;
text-align: center;
font-weight: 600;
}
.sharers_buttons {
display: inline-block;
vertical-align: middle;
}
.sharers .x, .sharers .fb, .sharers .ln {
transition: .5s;
border-radius: 50vh;
margin-bottom: 8%;
margin-right: 2%;
margin-left: 2%;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 13px;
padding-left: 10px;
}
@media (min-width: 1241px) {
.sharers .x, .sharers .fb, .sharers .ln {
margin-bottom: 1%;
margin-right: 1%;
margin-left: 1%;
}
}
.sharers .x .txt, .sharers .fb .txt, .sharers .ln .txt {
display: inline-block;
vertical-align: middle;
color: #f9feff;
}
.sharers .x img, .sharers .fb img, .sharers .ln img {
display: inline-block;
vertical-align: middle;
margin-right: 1px;
height: 16px;
width: 16px;
}
/*色*/
.sharers .x {
background-color: #000;
}
.sharers .fb {
background-color: #1877f2;
}
.sharers .ln {
background-color: #68b72b;
}
@media (min-width: 768px) {
.sharers .x:hover {
background-color: #333;
}
.sharers .fb:hover {
background-color: #3796FF;
}
.sharers .ln:hover {
background-color: #54DA21;
}
}
/*まるつきリスト ※647行あたりに、直前にpがあったときの記述がある
------------------------------------------------------------*/
.list0 > ul {
list-style: none;
padding: 0;
}
.list0 > ul > li::before {
font-weight: 600;
color: #1d98ff;
content: "● ";
}
.list0 > ul > li { /*2行目の頭をそろえるもの*/
text-indent: -1.3em;
padding-left: 1.3em;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.list0 > ul > li:first-child {
margin-top: 0; /* 1 行目の上余白をなくす */
}
/* 画面幅が 768px 以下（＝スマホ・タブレット）だけに限定し「・」が回り込まないようにしたい場合 */
@media (max-width: 767px) {
p + .list0 {
clear: both;
}
}
/*ポチつきリスト ※647行あたりに、直前にpがあったときの記述がある
------------------------------------------------------------*/
.list1 > ul {
list-style: none;
padding: 0;
}
.list1 > ul > li::before {
font-weight: 600;
color: #1d98ff;
content: "・ ";
}
.list1 > ul > li { /*2行目の頭をそろえるもの*/
text-indent: -0.9em;
padding-left: 1.3em;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.list1 > ul > li:first-child {
margin-top: 0; /* 1 行目の上余白をなくす */
}
/* 画面幅が 768px 以下（＝スマホ・タブレット）だけに限定し「・」が回り込まないようにしたい場合 */
@media (max-width: 767px) {
p + .list1 {
clear: both;
}
}
/*数字つきリスト ※647行あたりに、直前にpがあったときの記述がある
------------------------------------------------------------*/
.list2 > ol {
counter-reset: li; /* li のカウンタを 0 にセット */
list-style: none;
padding: 0;
}
.list2 > ol > li::before {
font-weight: 600;
color: #1d98ff;
counter-increment: li; /* li の数を一つずつ増加 */
content: counter(li) ". "; /* 数を表示 */
}
.list2 > ol > li { /*2行目の頭をそろえるもの*/
text-indent: -1.3em;
padding-left: 1.3em;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.list2 > ul > li:first-child {
margin-top: 0; /* 1 行目の上余白をなくす */
}
/* 画面幅が 768px 以下（＝スマホ・タブレット）だけに限定し「数字」が回り込まないようにしたい場合 */
@media (max-width: 767px) {
p + .list2 {
clear: both;
}
}
/*リストの中の物のインデントをただす。
------------------------------------------------------------*/
.list0 > ul > li > .grid_1 > ul > li, .list0 > ul > li > .grid_s1-m2 > ul > li, .list0 > ul > li > .grid_s1-m2bl > ul > li, .list0 > ul > li > .grid_s1-m2br > ul > li, .list0 > ul > li > .grid_s1-m3 > ul > li, .list0 > ul > li > .grid_2 > ul > li, .list0 > ul > li > .grid_s2-m3 > ul > li, .list0 > ul > li > .grid_s2-m4 > ul > li, .list1 > ul > li > .grid_1 > ul > li, .list1 > ul > li > .grid_s1-m2 > ul > li, .list1 > ul > li > .grid_s1-m2bl > ul > li, .list1 > ul > li > .grid_s1-m2br > ul > li, .list1 > ul > li > .grid_s1-m3 > ul > li, .list1 > ul > li > .grid_2 > ul > li, .list1 > ul > li > .grid_s2-m3 > ul > li, .list1 > ul > li > .grid_s2-m4 > ul > li, .list2 > ol > li > .grid_1 > ul > li, .list2 > ol > li > .grid_s1-m2 > ul > li, .list2 > ol > li > .grid_s1-m2bl > ul > li, .list2 > ol > li > .grid_s1-m2br > ul > li, .list2 > ol > li > .grid_s1-m3 > ul > li, .list2 > ol > li > .grid_2 > ul > li, .list2 > ol > li > .grid_s2-m3 > ul > li, .list2 > ol > li > .grid_s2-m4 > ul > li {
text-indent: 0!important;
}
/*関連リンクなど
------------------------------------------------------------*/
.moving {
display: flex;
align-items: center; /* 縦方向の中央揃え */
line-height: 1.5; /* 文字の高さを明示的に指定 */
}
.moving img {
width: 1.5em !important;
height: 1.5em !important;/* 文字の高さに合わせる */
vertical-align: middle;
margin-right: 10px!important;
margin-bottom: 0!important;
}
@media (min-width: 768px) {
.moving a:hover {
color: #1d98ff;
text-decoration: underline;
}
}
/*区切り線
------------------------------------------------------------*/
hr {
height: 0;
width: 100%;
margin-top: 10%;
margin-bottom: 10%;
padding: 0;
border-top-style: none;
border-right-style: none;
border-left-style: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #d6d2c6;
}
@media (min-width: 768px) {
hr {
margin-top: 37px;
margin-bottom: 37px;/*margin-top: calc(100vw/(768/30));
margin-bottom: calc(100vw/(768/30));*/
}
}
/*hrの次に来る何でも上に余白があるものは0にする。*/
hr + * {
margin-top: 0 !important;
}
/*テーブル デフォルト
------------------------------------------------------------*/
table {
border-collapse: collapse;
margin-bottom: 2%;
}
th {
font-weight: 600;
vertical-align: top;
text-align: left;
padding: 2%;/**/
/*white-space: nowrap;*/
/*width: 30%;*/
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #d6d2c6;
border-bottom-color: #d6d2c6;
}
td {
vertical-align: top;
padding: 2%;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #d6d2c6;
border-bottom-color: #d6d2c6;
}
th a:hover, td a:hover {
text-decoration: underline;
}
/*テーブルの一つ目の子要素何でも上余白0に*/
table td > :first-child, table th > :first-child {
margin-top: 0 !important;
}
/*テーブルの最後の子要素何でも下余白0に*/
table td > :last-child, table th > :last-child {
margin-bottom: 0 !important;
}
/*テーブル 横スクロールのために入れる