とする（.txt-centerはmain.css）。
.s-title1側にtext-align:leftは書かないこと。contents.cssはmain.cssより後に読まれるため、
詳細度が同じ.txt-centerに勝ってしまい中央寄せが効かなくなる。左揃えはbodyの既定のままでよい。
1. .f-cgはwidth:fit-contentで中身の幅しか持たないブロックなので、
親のtext-align:centerでは中央に来ない。左右autoのマージンで箱ごと中央に置く。
2. .sq90 / .sq105の変形の基準点は左が既定（contents.cssの.sq90, .sq100, .sq105）。
そのままだと縮小・拡大したぶんだけ見た目の中心が左へずれるので、中央基準に変える
（マークアップ側に.sq-centerを付けても同じ結果になる） */
.s-title1.txt-center .f-cg.sq105{
margin-left: auto;
margin-right: auto;
transform-origin: center center;
}
.s-title1.txt-center .f-jp.sq90{
transform-origin: center center;
}
/*******************************
/* BUTTON
*******************************/
/* vm */
.vm{
display: inline-flex;
align-items: center;
position: relative;
width: 200px;
color: #000;
padding-bottom: 1.214rem;
transition: .4s;
}
.vm::after{
position: absolute;
content: "";
width: 100%;
height: 1px;
background-color: rgba(185,185,185,0.4);
left: 0;
bottom: 0;
}
.vm .txt{
font-size: 0.857rem;
}
.vm .arrow{
width: 5px;
height: 10px;
background-image: url(../images/arrow.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
position: absolute;
top: 9px;
right: 0;
transition: .2s;
}
.vm:hover{
opacity: 0.7;
text-decoration: none;
}
.vm:hover .arrow{
right: -7px;
}
@media screen and (min-width: 1200px) {
.vm{
width: 240px;
padding-bottom: 1.4rem;
}
.vm .txt{
font-size: 1rem;
}
.vm .arrow{
width: 7px;
height: 13px;
top: 8px;
}
}
/* arrow_btn */
.arrow_btn{
width: 54px;
height: 30px;
border-radius: 20px;
background-color: #fff;
background-image: url(../images/arrow_black.svg);
background-size: 10px 9px;
background-repeat: no-repeat;
background-position: center;
transition: 4s;
}
a:hover .arrow_btn{
opacity: 0.7;
}
/*******************************
container
*******************************/
.container_90, .container_1340, .container_1620{
display: block;
width: 92.307%;
margin-right: auto;
margin-left: auto;
}
.container_90.max1000{
max-width: 1000px;
}
.container_90.max1200{
max-width: 1200px;
}
.container_90.max1400{
max-width: 1400px;
}
.container_90.max1600{
max-width: 1600px;
}
@media screen and (min-width: 992px) {
.container_90{
width: 90%;
}
.container_1340{
width: 74.444%;
max-width: 1340px;
}
.container_1620{
width: 90%;
max-width: 1620px;
}
}
/*******************************
パンクズ
*******************************/
#pls{
max-width: 400px;
position: absolute;
top: 0;
right: 0;
}
#pan {
font-size: 0.857rem;
display: flex;
/* wrapだと長い現在ページ項目がカラム落ちしてから省略されるため、
改行させずに1行へ収めて省略する（下の縮小指定とセット） */
flex-wrap: nowrap;
justify-content: flex-end;
text-align: right;
color: #787878;
/* .sq90のscaleXは見た目だけを変え、省略位置の判定には効かない。
そのままだと#plsの幅で切ってから90%に縮むため、右に11%の余白が残って
表示できるはずの文字まで削られる。
ボックスを1/0.9倍で持たせ、負のマージンで右端を#plsに合わせることで、
scaleX後の見た目がちょうど#plsの幅に収まり、省略位置も見た目どおりになる。
はみ出す11%は左（テキストのない側）なので横スクロールは出ない */
width: 111.111%;/* 1 / 0.9 */
margin-left: -11.111%;
}
#pan a{
color: #787878;
text-decoration: none;
transition: .3s;
}
#pan a.home{
color: #AF09F1;
}
#pan a:hover{
opacity: 0.7;
}
/* 現在ページの項目は記事タイトルがそのまま入るので長くなりがち。
2行になるとページタイトルと干渉するので、ここだけ縮めて1行に省略する。
「トップ」「＞」などの手前の項目は縮むと読めなくなるので固定し、
足りない幅は現在ページ項目だけが負担する。
flexアイテムはmin-width:autoによりコンテンツ幅より縮まないため、
min-width:0を入れないとellipsisにならない */
#pan > *{
flex-shrink: 0;
}
#pan > .current-item{
flex-shrink: 1;
min-width: 0;
}
/* schema.org用のラッパーspanで包まれている場合は、そのラッパーを縮める */
#pan > span:has(.current-item){
flex-shrink: 1;
min-width: 0;
}
#pan .current-item{
color: #787878;
display: inline-block;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
/* 省略記号はテーマのmgm_trancate()に合わせてピリオド3つにする。
文字列指定に未対応のブラウザは下の行を読み飛ばし、上のellipsis（…）が残る */
text-overflow: ellipsis;
text-overflow: "...";
}
/* .pan_tailは「区切り文字＋現在ページ項目」をまとめた要素（mgm_pan_wrap_current）。
投稿・カスタム投稿のシングルにのみ付く。
992px以上はdisplay:contentsでこのボックス自体をレイアウトから消し、
中身を#panの直接の子として扱わせる（上のflex指定をそのまま効かせるため） */
#pan .pan_tail{
display: contents;
}
/* 991px以下は幅が足りずタイトルを省略しても意味を成さないので、
区切り文字ごと丸ごと隠して「トップ ＞ セクション名」までにする */
@media screen and (max-width: 991px){
#pan .pan_tail{
display: none;
}
}
@media screen and (min-width: 768px){
#pls{
top: 95px;
}
}
@media screen and (min-width: 768px){
#pls{
top: 100px;
}
}
@media screen and (min-width: 1200px){
#pls{
top: 110px;
}
#pan{
font-size: 0.928rem;
}
}
@media screen and (max-width: 767px){
#pls{
display: none;
}
}
/*******************************
/* フォーム/テーブル
*******************************/
.wpcf7-submit {
font-size: 1.2em;
background-color: #000;
color: #fff;
border-style: none;
width: 60%;
margin-bottom: 30px;
padding-top: 15px;
padding-right: 40px;
padding-bottom: 15px;
padding-left: 40px;
}
#form {
max-width: 100%;
}
#form th span {
font-size: 0.8em;
color: #FFF;
background-color: #C00;
padding: 3px;
}
#form th, #form td{
font-size: 1rem;
font-weight: 500;
padding: 1.9rem 0;
color: #323232;
/* セル内テキストを水平比率90%に（.sq90相当）。
罫線はセルではなく tr に持たせているので、一緒に縮むことはない */
transform: scaleX(0.9);
transform-origin: left center;
}
/* 罫線は tr 側。table要素は border-collapse: collapse（bootstrap）なので描画される */
#form tr{
border-bottom: 1px solid rgba(200,200,200,0.5);
}
#form tr:first-child{
border-top: 1px solid rgba(200,200,200,0.5);
}
#form th {
width: 25%;
vertical-align: middle;
}
#form td {
text-align: left;
}
#form2 {
max-width: 100%;
margin-bottom: 40px;
background-color: #FFF;
}
#form2 th span {
font-size: 0.8em;
color: #FFF;
background-color: #C00;
padding: 3px;
}
#form2 th {
padding: 10px;
width: 30%;
border-bottom: 1px solid #1a1a1a;
text-align: center;
}
#form2 td {
padding: 10px;
border-bottom: 1px solid #eee;
vertical-align: middle;
font-weight: normal;
text-align: center;
}
#form3 {
max-width: 100%;
margin-bottom: 40px;
background-color: #FFF;
}
#form3 tr {
border-bottom: 1px dotted #bfbfbf;
margin-bottom: 3rem;
padding-bottom: 2rem;
display: flex;
}
#form3 th {
width: 150px;
color: #FFF;
text-align: center;
padding-top: 10px;
}
#form3 th span {
background-color: #808080;
display: inline-block;
width: 150px;
}
#form3 td {
padding: 10px;
vertical-align: middle;
font-weight: normal;
padding-left: 4rem;
}
#form3 td .tel_txt1 {
font-size: 1.2rem;
margin-bottom: 0;
}
#form3 td .tel_txt2 {
font-size: 2.4rem;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
line-height: 1;
display: block;
}
@media screen and (min-width: 1200px) {
#form th, #form td{
font-size: 1.066rem;
}
}
/* テキストエリアの設定 */
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
width: 100%;
color: #000;
padding: 10px 0 10px 10px;
margin: 10px 0;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea:focus, select:focus {
background-color: #fff;
}
@media screen and (min-width: 1200px){
#form th, #form td{
padding: 2.286rem 0;
}
#form th{
width: 20%;
}
}
@media screen and (min-width: 1600px){
#form th{
width: 16%;
}
}
@media only screen and (max-width:479px) {
/* 479px以下用（スマートフォン用）の記述 */
#form {
max-width: 100%;
}
#form th {
width: 100%;
display: block;
border-top: none;
padding: 20px 0 0;
border-bottom: none;
}
#form tr:first-child td{
border-top: none;
}
#form td {
width: 100%;
display: block;
border-top: none;
padding: 8px 0 20px;
}
#form2 {
max-width: 100%;
margin-bottom: 40px;
}
#form2 th {
width: 50%;
border-top: none;
text-align: center;
}
#form2 td {
width: 100%;
display: block;
border-top: none;
text-align: center;
}
#form3 {
max-width: 100%;
margin-bottom: 40px;
}
#form3 tr {
margin-bottom: 1rem;
padding-bottom: 1rem;
flex-direction: column;
}
#form3 th {
width: 50%;
display: block;
border-top: none;
}
#form3 td {
width: 100%;
display: block;
border-top: none;
margin-bottom: 0;
padding-left: 10px;
}
/* テキストエリアの設定 */
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
width: 100%;
padding: 10px;
margin: 10px 0;
}
.wpcf7-submit {
font-size: 1.2em;
border-style: none;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
}
}
/*--------------------------------------
archiveページャー
--------------------------------------*/
.pagination{
margin-top: 4.28rem ;
line-height: 1;
}
.pagination ul{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0;
}
.pagination ul li{
list-style: none;
}
/* 1199px以下：数字同士は20px、数字とPREV/NEXTは49px */
.pagination ul li + li{
margin-left: 1.428rem;/* 20px */
}
.pagination ul li a{
transition: .3s;
}
.pagination ul li a:hover{
text-decoration: none;
opacity: 0.8;
}
/* フォント・カラーは .c-post-index に合わせる */
.page-numbers{
color: #000;
font-size: 1.14rem;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
.prev .page-numbers, .next .page-numbers{
color: #fff;
width: 72px;
height: 26px;
font-size: 0.84rem;
letter-spacing: 0.02em;
padding: 0;
border-radius: 16px;
text-align: center;
}
.prev .page-numbers{
background-color: #000;
}
.next .page-numbers{
background-color: #AF09F1;
}
/* 数字リンクは #AF09F1、カレントは #8b8b8b（背景なし） */
a.page-numbers{
color: #AF09F1;
}
.pagination a.page-numbers:hover{
color: #AF09F1;
}
.pagination .prev .page-numbers:hover, .pagination .next .page-numbers:hover{
color: #fff;
}
.pagination .prev{
margin-right: 3.5rem;/* 49px */
}
.pagination .next{
margin-left: 3.5rem;/* 49px */
}
/* 767px以下のみPREVは左端・NEXTは右端（コンテナ幅いっぱい）。
両端のピルは同じ幅なので、autoマージンでも数字は中央に揃う */
@media screen and (max-width: 767px){
.pagination .prev{
margin-right: auto;
}
.pagination .next{
margin-left: auto;
}
}
/* PREVの直後の数字は li + li のmargin-leftも効いて余白が二重になるので打ち消す
（PREV側の間隔は .prev の margin-right だけで取る） */
.pagination .prev + li{
margin-left: 0;
}
.active.page-numbers{
color: #8b8b8b;
}
/* 先頭ページのPREV・最終ページのNEXTは薄く表示してクリック不可に */
.pagination li.disabled{
opacity: 0.3;
pointer-events: none;
cursor: default;
}
@media screen and (min-width: 768px){
.pagination{
margin-top: 6.428rem;
}
}
@media screen and (min-width: 1200px){
.pagination{
margin-top: 8rem;
}
/* 数字同士は40px、数字とPREV/NEXTは78px空ける */
.pagination ul li + li{
margin-left: 2.666rem;/* 40px */
}
.pagination .prev{
margin-right: 5.2rem;/* 78px */
}
.pagination .next{
margin-left: 5.2rem;/* 78px */
}
.page-numbers{
font-size: 1.33rem;
padding: 0;/* 上のmarginで間隔を取るため左右パディングは持たせない */
}
.prev .page-numbers, .next .page-numbers{
font-size: 1rem;
width: 90px;
height: 32px;
}
}
/*******************************
/* single.php アイキャッチ
***************************/
.sgl {
margin-bottom: 30px;
text-align: center;
}
/*************************
/* single.php 日付
*************************/
#date span {
color: #878787;
font-size: 1rem;
font-family: "Poppins", sans-serif;
letter-spacing: 0;
}
/* single.php ページ送り
----------------------------------------------------------------------------------------------------*/
#next {
background-color: #efefef;
padding: 10px;
margin-top: 30px;
}
.nx_left {
width: 100%;
text-align: left;
}
.nx_left a {
background-color: #FFF;
color: #000;
text-decoration: none;
display: block;
padding-top: 10px;
padding-bottom: 10px;
background-image: url(../images/left.png);
background-repeat: no-repeat;
background-position: left center;
padding-left: 35px;
}
.nx_left a:hover {
background-color: #828282;
color: #FFF;
text-decoration: none;
display: block;
padding-top: 10px;
padding-bottom: 10px;
background-image: url(../images/left2.png);
background-repeat: no-repeat;
background-position: left center;
}
.nx_right {
width: 100%;
text-align: right;
}
.nx_right a {
background-color: #FFF;
color: #000;
text-decoration: none;
display: block;
padding-top: 10px;
padding-bottom: 10px;
background-image: url(../images/right.png);
background-repeat: no-repeat;
background-position: right center;
padding-right: 35px;
}
.nx_right a:hover {
background-color: #828282;
color: #FFF;
text-decoration: none;
display: block;
padding-top: 10px;
padding-bottom: 10px;
background-image: url(../images/right2.png);
background-repeat: no-repeat;
background-position: right center;
}
/*--------------------------------
PREV NEXT
---------------------------------*/
#prev_next {
width: 100%;
margin: 36px 0 24px;
padding: 0;
display: table;
}
#prev_next #prev, #prev_next #next {
width: 50%;
padding: 30px 10px 10px;
border-top: #000 1px solid;
border-bottom: #000 1px solid;
display: table-cell;
position: relative;
text-decoration: none;
}
#prev_next #next{
text-align: right;
}
#prev_next #prev p, #prev_next #next p {
font-size: 90%;
line-height: 1.5;
margin-top: 0.5rem;
color: #000;
}
#prev_next #prev:hover, #prev_next #next:hover {
background-color: #f7f7f5;
}
#prev_next #prev {
border-right: #000 1px solid;
}
#prev_next #prev_title, #prev_next #next_title {
font-size: 90%;
top: -1em;
position: absolute;
border: 1px #000 solid;
background: #fff;
text-align: center;
padding: 3px;
color: #000;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
}
#prev_next #next_title {
right: 10px;
}
#prev_next #prev img, #prev_next #next img {
margin: 0 auto;
width: auto;
}
#prev_next #prev_no, #prev_next #next_no {
width: 50%;
height: 140px;
padding: 0 10px;
display: table-cell;
}
#prev_next #prev_no {
border-right: #000 1px solid;
}
#prev_next_home {
margin: 0 auto;
background-color: #000;
border: solid 9px #fff;
width: 100px;
height: 100px;
border-radius: 100px;
box-shadow: 0 0 0 3px #000;
-webkit-box-shadow: 0 0 0 3px #000;
-moz-box-shadow: 0 0 0 3px #000;
text-align: center;
}
#prev_next_home:hover {
opacity: 0.7;
}
#prev_next_home i {
color: #FFF;
margin: 10px auto;
font-size: 60px;
}
@media screen and (min-width: 768px){
#prev_next #prev, #prev_next #next{
padding: 40px 10px 20px;
}
}
/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px) {
/*-- ここから --*/
/*--------------------------------------
768px PREV NEXT
--------------------------------------*/
#prev_next #prev, #prev_next #prev::before, #prev_next #prev::after, #prev_next #next, #prev_next #next::before, #prev_next #next::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
#prev_next #prev_title, #prev_next #next_title {
padding: 3px 10px;
}
#prev_next #next_title {
right: 10px;
}
#prev_next #prev img {
float: left;
margin-right: 10px
}
#prev_next #next img {
float: right;
margin-left: 10px;
}
/*-- ここまで --*/
}
/*************
/* 投稿ギャラリー
*************/
.wp-caption-text {
font-size: 12px;
color: #999999;
text-align: center;
}
.gallery {
margin: auto;
}
.gallery .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 25%;
padding: 5px;
}
.gallery img {
margin-bottom: 5px;
}
.gallery .gallery-caption {
margin-left: 0;
margin-bottom: 35px;
padding-right: 20px;
padding-left: 20px;
}
/*-----------------------------
wordpressのギャラリースマホ調整
------------------------------*/
@media screen and (max-width: 640px) {
#gallery-1 {
display: flex;
flex-wrap: wrap;
}
.gallery-columns-3 .gallery-item, .gallery-columns-4 .gallery-item {
float: none;
width: 50% !important;
margin: 0;
}
}
/*******************************
/* youtube gmapレスポンシブ対応
***************************/
.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.ggmap iframe, .ggmap object, .ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*******************************
/* レスポンシブ改行
***************************/
@media screen and (min-width: 576px) {
.br-pc {
display: block;
}
.br-sp {
display: none;
}
}
@media screen and (max-width: 567px) {
.br-pc {
display: none;
}
.br-sp {
display: block;
}
}
@media screen and (max-width: 389px) {
.br_390-767{
display: none;
}
}
@media screen and (min-width: 768px){
.br_max767{
display: none;
}
.br_min768{
display: block;
}
}
@media screen and (max-width: 767px){
.br_max767{
display: block;
}
.br_min768{
display: none;
}
}
@media screen and (min-width: 992px){
.br_max991{
display: none;
}
.br_min992{
display: block;
}
}
@media screen and (max-width: 991px){
.br_max991{
display: block;
}
.br_min992{
display: none;
}
}
@media screen and (min-width: 1080px){
.br_min1080{
display: block;
}
}
@media screen and (max-width: 1079px){
.br_min1080{
display: none;
}
}
@media screen and (min-width: 1200px){
.br_max1199{
display: none;
}
.br_min1200{
display: block;
}
}
@media screen and (max-width: 1199px){
.br_max1199{
display: block;
}
.br_min1200{
display: none;
}
}
@media screen and (min-width: 1300px){
.br_min1300{
display: block;
}
}
@media screen and (max-width: 1299px){
.br_min1300{
display: none;
}
}
@media screen and (min-width: 1400px){
.br_max1399{
display: none;
}
.br_min1400{
display: block;
}
}
@media screen and (max-width: 1399px){
.br_max1399{
display: block;
}
.br_min1400{
display: none;
}
}
@media screen and (min-width: 1500px){
.br_min1500{
display: block;
}
}
@media screen and (max-width: 1499px){
.br_min1500{
display: none;
}
}
@media screen and (min-width: 1600px){
.br_max1599{
display: none;
}
}
@media screen and (max-width: 1599px){
.br_max1599{
display: block;
}
.br_min1600{
display: none;
}
}
@media screen and (min-width: 1600px){
.br_min1600{
display: block;
}
}
@media screen and (min-width: 1700px){
.br_min1700{
display: block;
}
}
@media screen and (max-width: 1699px){
.br_min1700{
display: none;
}
}
@media screen and (min-width: 1800px){
.br_min1800{
display: block;
}
}
@media screen and (max-width: 1799px){
.br_min1800{
display: none;
}
}
.br_576-991, .br_768-991, .br_768-1122, .br_768-1199, .br_768-1399, .br_768-1599, .br_768-1699, .br_992-1199, .br_992-1299, .br_992-1399, .br_992-1499, .br_1200-1299, .br_1200-1320, .br_1200-1399, .br_1200-1499, .br_1200-1599, .br_1200-1699, .br_1400-1599{
display: none;
}
@media screen and (min-width: 576px) and (max-width: 991px){
.br_576-991{
display: block;
}
}
@media screen and (min-width: 768px) and (max-width: 991px){
.br_768-991{
display: block;
}
}
@media screen and (min-width: 768px) and (max-width: 1122px){
.br_768-1122{
display: block;
}
}
@media screen and (min-width: 768px) and (max-width: 1199px){
.br_768-1199{
display: block;
}
}
@media screen and (min-width: 768px) and (max-width: 1399px){
.br_768-1399{
display: block;
}
}
@media screen and (min-width: 768px) and (max-width: 1599px){
.br_768-1599{
display: block;
}
}
@media screen and (min-width: 768px) and (max-width: 1699px){
.br_768-1699{
display: block;
}
}
@media screen and (min-width: 992px) and (max-width: 1199px){
.br_992-1199{
display: block;
}
}
@media screen and (min-width: 992px) and (max-width: 1299px){
.br_992-1299{
display: block;
}
}
@media screen and (min-width: 992px) and (max-width: 1399px){
.br_992-1399{
display: block;
}
}
@media screen and (min-width: 992px) and (max-width: 1499px){
.br_992-1499{
display: block;
}
}
@media screen and (min-width: 1200px) and (max-width: 1299px){
.br_1200-1299{
display: block;
}
}
@media screen and (min-width: 1200px) and (max-width: 1320px){
.br_1200-1320{
display: block;
}
}
@media screen and (min-width: 1200px) and (max-width: 1399px){
.br_1200-1399{
display: block;
}
}
@media screen and (min-width: 1200px) and (max-width: 1499px){
.br_1200-1499{
display: block;
}
}
@media screen and (min-width: 1200px) and (max-width: 1599px){
.br_1200-1599{
display: block;
}
}
@media screen and (min-width: 1200px) and (max-width: 1699px){
.br_1200-1699{
display: block;
}
}
@media screen and (min-width: 1400px) and (max-width: 1599px){
.br_1400-1599{
display: block;
}
}
.br_768-991none{
display: block;
}
@media screen and (min-width: 768px) and (max-width: 991px){
.br_768-991none{
display: none;
}
}
/*****************************
/* form_customize
*****************************/
/*form reset*/
input, button, select, textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
border: none;
border-radius: 0;
font: inherit;
outline: none;
}
textarea {
resize: vertical;
}
input[type='checkbox'], input[type='radio'] {
display: none;
}
input[type='submit'], input[type='button'], label, button, select {
cursor: pointer;
}
select::-ms-expand {
display: none;
}
/*form*/
.form_outer{
margin-top: 5.06rem;
}
.form_intro{
margin-bottom: 4.28rem;
/* 下のpが幅を1/0.9倍で持つぶん、レイアウト上は右へ11%はみ出す
（縮小後の見た目は100%に収まる）。横スクロールを出さないよう閉じ込める。
overflow:hiddenはスクロールコンテナを作るのでclipを使う */
overflow-x: clip;
}
/* .sq90のscaleX(0.9)は見た目だけを縮めるので、幅100%のままだと
右に10%の余白が残る。1/0.9倍の幅を持たせて折り返し・行末を右端まで届かせる */
.form_intro p{
color: #000;
font-size: 0.928rem;
line-height: 1.8;
margin-bottom: 0;
width: 111.111%;/* 1 / 0.9 */
}
.form_intro p .form_label_req{
margin-right: 2px;
margin-left: 0;
}
@media screen and (min-width: 768px){
.form_outer{
margin-top: 7.95rem;
}
.form_intro{
margin-bottom: 5.35rem;
}
}
@media screen and (min-width: 1200px){
.form_outer{
margin-top: 8.9rem;
}
.form_intro{
margin-bottom: 6.266rem;
}
.form_intro p{
font-size: 1rem;
line-height: 2;
}
}
#form_customize{
width: 100%;
/* 入力欄は幅を1/0.9倍で持たせてscaleX(0.9)で縮めているため、
レイアウト上は右へ11%はみ出す（縮小後の見た目は100%に収まる）。
このはみ出しがスクロール範囲に加算されて横スクロールが出るのを止める。
overflow:hiddenはスクロールコンテナを作りposition:stickyを壊すのでclipを使う */
overflow-x: clip;
}
/* 入力欄の文字（プレースホルダー含む）を水平比率90%（.sq90相当）にする。
入力欄は背景を持つので、scaleX(0.9)だとグレーの箱ごと縮んでしまう。
幅と左右パディングを1/0.9倍で持たせて、縮小後に元の見た目に戻す */
#form_customize input, #form_customize select, #form_customize textarea, #form_customize input[type="date"]{
background-color: #fff;
border: none;
padding: 1.4rem 1.586rem;/* 左右は 1.428rem / 0.9 */
margin: 0;
width: 111.111%;/* 100% / 0.9 */
border-radius: 3px;
line-height: 1.5;
outline: none;
resize: none;
transform: scaleX(0.9);
transform-origin: left center;
}
/* CF7が入力欄を包むspan。インライン要素のままだと中身（幅111.111%のinput）に
合わせて広がり、span自体は縮小されないのでその11%が横スクロールになる。
幅100%のブロックに固定して、はみ出しを縮小されるinputの内側に閉じ込める */
#form_customize .wpcf7-form-control-wrap{
display: block;
width: 100%;
}
#form_customize input[type="text"], #form_customize input[type="email"], #form_customize input[type="tel"], #form_customize textarea{
color: #323232;
}
#form_customize input:focus, #form_customize select:focus, #form_customize textarea:focus{
outline: none;
}
#form_customize .form_block + .form_block{
margin-top: 2.428rem;
}
/* ラベル */
#form_customize .form_c_label{
display: flex;
align-items: center;
margin-bottom: 1.214rem;
line-height: 1.5;
color: #000;
pointer-events: none;
/* 背景・罫線を持たないのでそのまま水平比率90%にできる */
transform: scaleX(0.9);
transform-origin: left center;
}
/* ラベル内のリンク。
親のpointer-events:noneはリンクだけautoに戻せばクリックできる */
#form_customize .form_c_label a{
pointer-events: auto;
color: inherit;
text-decoration: underline;
text-underline-offset: 0.2em;
transition: .3s;
}
#form_customize .form_c_label a:hover{
opacity: 0.7;
color: inherit;
text-decoration: underline;
}
/* 必須・任意 */
.form_label_req{
color: #ff1414;
font-size: 0.928rem;
line-height: 1;
margin-left: 5px;
}
/* 入力してください */
#form_customize .wpcf7-not-valid-tip{
font-size: 0.88rem;
color: #ff1414;
transform: scaleX(0.9);
transform-origin: left center;
}
/* 個人情報 */
#form_customize .form_c_agree{
border-bottom: none;
margin-top: -0.357rem;
margin-bottom: 2.614rem;
text-align: center;
}
#form_customize .form_block.form_c_agree{
padding: 0;
padding-top: 4.615rem;
}
#form_customize .form_block.form_c_agree::after{
display: none;
}
#form_customize .form_c_agree .form_check_box .wpcf7-list-item-label{
font-size: 1rem;
}
#form_customize .form_c_agree .form_check_box .wpcf7-list-item{
width: 100%;
margin-right: 0;
}
.f_note{
font-size: 1rem;
letter-spacing: 0.04em;
margin-bottom: 1.842rem;
color: #000;
text-align: left;
}
.f_note a{
color: #000;
text-decoration: underline;
transition: .3s;
}
.f_note a:hover{
opacity: 0.8;
transition: .3s;
}
/* 送信ボタン */
#form_customize .form_c_submit{
border-bottom: none;
margin-bottom: 0 !important;
padding-bottom: 0;
position: relative;
text-align: center;
width: 100%;
margin-right: auto;
margin-left: auto;
}
#form_customize .form_block.form_c_submit{
padding: 0;
margin-top: 4.28rem;
margin-bottom: 0;
text-align: center;
justify-content: center;
font-size: 1rem;
}
#form_customize .form_block.form_c_submit::before{
display: none;
}
#form_customize .form_block.form_c_submit::after{
display: none;
}
/* 送信ボタンは水平比率90%の対象外。
黒い箱ごと縮むため幅を1/0.9倍にする必要があるが、
中央寄せ（origin: center）だと縮小後の右端が親の105.5%に残り横スクロールが出る。
左基準にすると今度は最大幅360pxで頭打ちになったときに中央からずれるため、
ボタンだけは等倍のままにしている */
#form_customize .form_c_submit input{
width: 100%;
max-width: 360px;
height: 60px;
font-size: 1.14rem;
display: inline-flex;
justify-content: center;
align-items: center;
background-color: #000;
color: #fff;
margin-bottom: 0;
border-radius: 0;
padding: 0;
transition: .3s;
transform: none;/* 共通ルールのscaleX(0.9)を打ち消す */
}
#form_customize .form_c_submit input:hover{
opacity: 0.8;
transition: .3s;
}
#form_customize .form_c_submit .wpcf7-spinner{
position: absolute;
margin: 0;
top: 0;
left: calc((50% + 100px) + 30px);
transform: translateX(-50%);
}
/* リキャプチャ文章 */
.form_end_txt{
font-size: 0.769rem;
color: #737373;
text-align: center;
margin-top: 1.72rem;
margin-bottom: 0;
}
@media screen and (min-width: 768px){
#form_customize .form_block{
display: flex;
align-items: flex-start;
justify-content: space-between;
}
#form_customize .form_c_label{
width: 30%;
margin-bottom: 0;
padding-top: 0.8rem;
}
#form_customize .form_c_item{
width: 70%;
}
/* 個人情報 */
#form_customize .form_block.form_c_agree .form_c_item{
width: 100%;
max-width: unset;
}
.f_note{
text-align: center;
}
/* 送信ボタン */
#form_customize .form_block.form_c_submit{
width: 70%;
margin-right: 0;
margin-left: auto;
justify-content: flex-start;
}
}
@media screen and (min-width: 1200px){
#form_customize .form_block + .form_block{
margin-top: 2.66rem;
}
#form_customize input, #form_customize select, #form_customize textarea, #form_customize input[type="date"]{
font-size: 1.066rem;
padding: 1.87rem 3.33rem;
border-radius: 6px;
}
/* 必須・任意 */
.form_label_req{
font-size: 1rem;
}
/* ラベル */
#form_customize .form_c_label{
padding-top: 1.65rem;
display: flex;
align-items: center;
width: 25%;
font-size: 1.066rem;
}
#form_customize .form_c_item{
width: 75%;
}
/* 送信ボタン */
#form_customize .form_block.form_c_submit{
width: 75%;
margin-top: 6.33rem;
}
#form_customize .form_c_submit input{
max-width: 400px;
height: 100px;
font-size: 1.33rem;
}
/* 個人情報 */
.f_note{
margin-bottom: 2.357rem;
}
#form_customize .form_block.form_c_agree{
padding-top: 5.333rem;
margin-bottom: 3.585rem;
}
/* リキャプチャ文章 */
.form_end_txt{
margin-top: 2.7rem;
}
}
/* CUSTOM SELECTBOX */
#form_customize select{
color: #8c8c8c;
-webkit-appearance: none;
appearance: none;
}
#form_customize select.selected{
color: #000;
}
/* CUSTOM CHECKBOX */
#form_customize .form_check_box .wpcf7-form-control{
display: flex;
flex-wrap: wrap;
position: relative;
top: 4px;
}
#form_customize .form_check_box .wpcf7-list-item{
margin: 0;
display: block;
width: 100%;
}
#form_customize .form_check_box label{
cursor: pointer;
margin-bottom: 0;
}
#form_customize .form_check_box input{
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
#form_customize .form_check_box .wpcf7-list-item-label{
position: relative;
display: flex;
align-items: center;
margin-bottom: 0;
color: #000;
line-height: 1.5;
transform: scaleX(0.9);
transform-origin: left center;
}
/* チェックボックスの四角（::before）とチェック（::after）は、
親のscaleX(0.9)で横だけ潰れるので割り戻して正方形に戻す */
#form_customize .form_check_box .wpcf7-list-item-label::before, #form_customize .form_check_box .wpcf7-list-item-label::after {
content: "";
border-radius: inherit;
transition: .2s;
transform: scaleX(1.111);/* 1 / 0.9 */
}
#form_customize .form_check_box .wpcf7-list-item-label::before{
left: 0;
position: relative;
display: block;
width: 40px;
height: 40px;
margin-right: 20px;
background-color: #fff;
border-radius: 0;
border: none;
}
#form_customize .form_check_box .wpcf7-list-item-label::after{
position: absolute;
top: 16px;
left: 16px;
width: 8px;
height: 8px;
background-color: #AF09F1;
border-radius: 0;
opacity: 0;
}
#form_customize .form_check_box input:checked ~ .wpcf7-list-item-label::after{
opacity: 1;
}
@media screen and (min-width: 768px) {
#form_customize .form_block.check-box{
align-items: center;
}
#form_customize .form_block.check-box .form_c_label{
padding: 0;
}
#form_customize .form_check_box .wpcf7-form-control{
column-gap: 30px;
}
#form_customize .form_check_box .wpcf7-list-item{
width: 310px;
}
}
@media screen and (min-width: 1200px){
#form_customize .form_check_box .wpcf7-form-control{
column-gap: 50px;
row-gap: 22px;
top: 4px;
}
#form_customize .form_check_box .wpcf7-list-item{
width: 365px;
}
#form_customize .form_check_box .wpcf7-list-item-label{
font-size: 1.066rem;
}
#form_customize .form_check_box .wpcf7-list-item-label::before{
width: 60px;
height: 60px;
}
#form_customize .form_check_box .wpcf7-list-item-label::after{
top: 25px;
left: 25px;
width: 10px;
height: 10px;
}
#form_customize .form_check_box #type .wpcf7-list-item-label::after, #form_customize .form_c_agree .form_check_box .wpcf7-list-item-label::after{
top: 8px;
}
}
@media screen and (max-width: 1199px) {
#form_customize .form_check_box #type .wpcf7-list-item-label::after, #form_customize .form_check_box #chance .wpcf7-list-item-label::after{
top: 7px;
}
}
/* CUSTOM RADIO */
#form_customize .form_check_box.radio .wpcf7-list-item-label::before{
border-radius: 50%;
}
#form_customize .form_check_box.radio .wpcf7-list-item-label::after{
border-radius: 50%;
}
/* 2カラム */
@media screen and (min-width: 768px){
.form_column2{
display: flex;
justify-content: space-between;
}
.form_column2_item{
width: calc((100% - 20px)/2);
}
}
@media screen and (max-width: 767px){
.form_column2_item + .form_column2_item{
margin-top: 1.038rem;
}
}
/* 来場希望日時 */
#form_customize .datetime{
display: flex;
justify-content: space-between;
}
#form_customize .datetime .select_item{
margin-bottom: 0;
width: calc((100% - 15px)/2);
position: relative;
}
#form_customize .datetime .select_item::after{
position: absolute;
content: "";
background-image: url("../images/arrow-down.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
top: 50%;
right: 1rem;
width: 6px;
height: 5.25px;
transform: translateY(-50%);
}
#form_customize .datetime select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #323232;
line-height: 1.5;
}
#form_customize .datetime select.selected{
color: #323232;
}
.datetimeblock p{
margin-bottom: 0;
color: #323232;
letter-spacing: 0.03em;
font-size: 0.84rem;
margin-top: 0.369rem;
}
/* プレースホルダー */
#form_customize .wpcf7-form-control::placeholder{
color: #aaa;
opacity: 1;
}
@media screen and (min-width: 768px){
#form_customize .datetime .select_item{
width: calc((100% - 20px)/2);
}
}
@media screen and (min-width: 1200px){
#form_customize .datetime .select_item{
width: calc((100% - 35px)/2);
}
.datetimeblock p{
letter-spacing: 0.03em;
font-size: 0.93rem;
margin-top: 0.93rem;
}
#form_customize .datetime .select_item::after{
right: 1.428rem;
width: 8px;
height: 7px;
}
}
/* 住所 */
/* 上の入力欄と同じく、縮小後に50% / 340pxになる値を持たせる */
#form_customize .add .form-input__small300{
width: 55.555%;/* 50% / 0.9 */
max-width: 377.777px;/* 340px / 0.9 */
margin-bottom: 7px;
}
#form_customize #autozip{
display: none !important;
}
@media screen and (min-width: 768px){
#form_customize .add .form-input__small300{
margin-bottom: 10px;
}
}
@media screen and (min-width: 768px) {
#form_customize .form_check_box .wpcf7-form-control#type{
column-gap: 35px;
}
#form_customize .form_check_box .wpcf7-form-control#type .wpcf7-list-item{
width: calc((100% - 35px)/2);
margin: 0;
}
}
@media screen and (min-width: 992px) {
#form_customize .form_check_box .wpcf7-form-control#type{
column-gap: 30px;
row-gap: 10px;
}
#form_customize .form_check_box .wpcf7-form-control#type .wpcf7-list-item{
width: calc((100% - 60px)/3);
}
}
/* ============================ */
/* POST（記事詳細） */
/* .sq90（水平比率90%）が付くため、幅は1.111倍で持たせる。
scaleXは見た目だけを変え折り返し判定には効かないので、そのままだと
親の幅で折り返してから0.9倍に縮み、右に約10%の余白が残る。
1.111倍の幅で折り返させると、0.9倍された見た目が親の幅ぴったりになる */
.info_tit{
width: 111.111%;/* 100 / 0.9 */
}
/* 上のはみ出す11%はレイアウト上のボックスだけで、見た目には何もない領域。
ただし放置すると右へはみ出してページ全体に横スクロールが出るのでここで切る。
#main2・max1000はsingle.phpでしか使っておらず、
このページにposition:stickyもないのでoverflow:hiddenで問題ない */
#main2 > .container_90{
overflow: hidden;
}
.info_contents{
margin-top: 3.14rem;
}
/* 本文（the_content）はテキストと画像が混在するため、
.info_contents自体に.sq90を掛けると画像まで横に潰れてしまう。
テキストのブロック要素だけに水平比率90%を掛ける。
幅を1.111倍で持たせる理由は.info_titと同じ（折り返し位置を見た目に合わせる）。
はみ出す11%は上の#main2 > .container_90のoverflow:hiddenで切られる。
表組み（th/td）はセルを変形するとレイアウトが崩れるため対象外 */
.info_contents p,
.info_contents h2,
.info_contents h3,
.info_contents h4,
.info_contents h5,
.info_contents h6,
.info_contents li,
.info_contents dt,
.info_contents dd,
.info_contents blockquote,
.info_contents figcaption{
transform: scaleX(0.9);
transform-origin: left center;
width: 111.111%;/* 100 / 0.9 */
}
/* エディタで画像を置くとの外に、同じ親（#page-main）直下のcontainer_90 max1600として置いている
（マークアップは parts/service.php）。
線より上の余白はこの要素のmargin-topが、線から中身までの余白は
.service--page側のpadding-topが持つ */
.service_sep{
height: 1px;
background-color: rgba(60,60,60,0.5);
margin-top: 8.357rem;
}
.service.service--page{
/* 上の余白は.service_sepが持つので、.serviceの既定のmargin-topは打ち消す。
1200px以上の.service{margin-top:13.133rem}より詳細度が高いのでメディアクエリ側でも効く */
margin-top: 0;
padding-top: 3.857rem;
}
.service--page .service_list__item:first-child{
padding-top: 0;
}
.service--page .service_list__item:first-child::before{
content: none;
}
@media screen and (min-width: 768px) {
.service_sep{
margin-top: 10.92rem;
}
.service.service--page{
padding-top: 9.107rem;
}
}
@media screen and (min-width: 992px) {
.service.service--page{
width: 90%;
max-width: 1600px;
}
}
@media screen and (min-width: 1200px) {
.service_sep{
margin-top: 12.33rem;
}
.service.service--page{
padding-top: 13.13rem;
}
}