@charset "UTF-8";
/* =========================================================
 * layout.css — 骨組み
 *   ヘッダー（スマホ）／メイン領域／フッター／固定ボタン／ページトップ
 *   ※ サイドメニュー・ハンバーガーは nav.css
 *   ※ リセット・#wrap・.inner などの基本は style.css
 * ========================================================= */

#header {
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    max-width:100vw;
    height:68px;
    padding: 0;
    background:#fff;
    display: block;
    z-index: 2;
}

#main {
	background: #fff;
	margin-top: 68px;
    border-bottom: 10px solid var(--color-a);
    border-top: 10px double var(--color-a);
	min-height: -webkit-calc(100vh - 68px);
	min-height: calc(100vh - 68px);
        width:100%;
}

@media print, screen and (min-width: 1000px){
#header {display:none;}
#main {
margin-left:260px;
    margin-top:0;
    padding-top:0;
    min-height:100vh;
    -moz-transition: margin-right .25s linear;
    -webkit-transition: margin-right .25s linear;
    transition: margin-right .25s linear;
    width: -webkit-calc(100% - 260px);
    width: calc(100% - 260px);
}
}
#main.is-front{border-top:unset;}

/*================================================
　header（スマホ・タブレット）ロゴ
 ================================================*/
.toplogo-link{text-decoration:none;}
@media screen and (max-width: 999.9px) {
.toplogo{
    height: -webkit-calc(100% - 15px);
    height: calc(100% - 15px);
    width: auto;
    margin: 7px 15px 7px 10px ;
    position: absolute;
    top: 0;
    left:0px;
    right:unset;
}
}
@media screen and (max-width: 414px) {
.toplogo{
    height: -webkit-calc(100% - 35px);
    height: calc(100% - 35px);
    width: auto;
    margin: 18px 0px 0px 5px;
    position: unset;
}
}
@media print, screen and (min-width: 1000px){
.toplogo{display:none;}
}
/* ロゴ画像が未設定のときはサイト名を表示 */
.toplogo-text{
    display:flex;
    align-items:center;
    height:68px !important;
    margin:0 0 0 12px !important;
    font-weight:700;
    font-size:1.1em;
    color:var(--color-a);
}

/*================================================
　header ボタン（メール・電話）
 ================================================*/
.header_btn{display:none;}
@media screen and (min-width: 344px) {
.header_btn{
    letter-spacing: -.40em;
    display:block;
    position: absolute;
    top: 0;
    right: 40px;
}
.header_btn li {
    letter-spacing: 0.1em;
    display: inline-block;
    text-align: center;
    position: relative;
    padding: 17px 0 0;
    margin-right: 10px;
}
.header_btn li a {
    display: table-cell;
    vertical-align: middle;
    width: 34px;
    height: 34px;
    line-height: 1;
    position: relative;
    border-radius:50%;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}
.btn_l {background: var(--color-e); color: #fff;}
.btn_r {background: var(--color-c); color: #fff;}
.btn_l:hover, .btn_r:hover {opacity:0.8; color: #fff;}
/* アイコン画像はカスタマイザー（左上ボタン／右上ボタン）→ inc/enqueue.php でインライン出力 */
.btn_l::before, .btn_r::before {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    top: 7px;
    left: 7px;
    background-repeat: no-repeat;
    background-size: contain;
}
}
@media screen and (min-width: 540.1px) and (max-width: 999.9px){
.header_btn{right: 62px;}
.header_btn li {padding: 8px 0 0;}
.header_btn li a {width: 52px; height: 52px;}
.btn_l::before, .btn_r::before { width: 32px; height: 32px; top: 10px; left: 10px;}
}
@media print, screen and (min-width: 1000px){
.header_btn{display:none;}
}

/*================================================
　HR 画像ライン（画像はカスタマイザー「HRライン画像」）
 ================================================*/
.hrimg {
  display: block;
  width: 100%;
  height: 50px;
  background-repeat: repeat-x;
  background-size: auto 20px;
}


/*================================================
　footer
 ================================================*/
footer {
    background-color: var(--color-d);
    color:#fff;
    text-align: center;
    width: 100%;
    padding:20px 0 100px;
}
@media print, screen and (min-width:1000px){
footer {
    margin-left:260px;
    width: -webkit-calc(100% - 260px);
    width: calc(100% - 260px);
}
}
.copyright , .copyright a {color:#fff; text-decoration: none; margin:1.5em auto 1em;}
.copyright a:hover {opacity:0.8; text-decoration:underline;}



/* ------------------------------------
 下部固定
------------------------------------*/
.fixedf {
  display:block;
  position: fixed;
  bottom: 15px;
  width:280px;
  height:52px;
    left: calc(50% - 140px);
  z-index: 10 !important;
}
@media print, screen and (min-width: 1000px){
.fixedf {
    left: -web-kids-calc(50% - 140px + 130px);
    left: calc(50% - 140px + 130px);
}
}

/* ------------------------------------
ボタンの基本スタイル
------------------------------------*/
/* ボタン自体のスタイル */
.shine-button {
background: var(--color-e);
margin: 0 auto;
text-align: center;
display: block;
width: 100%;
max-width: 280px;
border-radius: 100px;
cursor: pointer;
position: relative;
overflow:hidden;}
/* ボタン内のリンクのスタイル 
（リンク自体でボタンを作る場合には不要） */
.shine-button a {
display: block;
width: 100%;
padding: 1em;
color: white;
text-decoration:none;
}
/* リンク自体でボタンを作る場合の追加のスタイル
（ボックス＋その中にリンクのあるボタンの場合には不要）*/
a.shine-button {
padding: 1em;
color: white;
text-decoration: none;
}
/* ------------------------------------
ボタンの外側にボックス作成
（疑似要素「before」を使う）
------------------------------------*/
.shine-button::before {
content: "";			/* 文字は表示しないので中身無しを指定 */
position: absolute;	/* ボタンの位置を基準に絶対値指定する */
display: block;		/* 形式はblock */
background: linear-gradient(to right,rgba(255,255,255,0), rgba(255,255,255,0.9));
/* 背景色は透明から白になるグラデーション */
width: 50px;	/* 横幅 */
height: 50px;	/* 縦幅 */
top: -60px;	/* ボタン左上を基準に上へ60pxの位置 */
left: -60px;	/* ボタン左上を基準に左へ60pxの位置 */
/* アニメーションの動作指定 */
animation-name:shine-run;	/* アニメーション名の指定 */
animation-delay:0s;		/* アニメーションの開始時間指定 */
animation-duration: 3s;	/* アニメーション動作時間の指定 */
animation-timing-function: ease-in;
/* アニメーションの動き指定（徐々に早く）*/
animation-iteration-count: infinite;
/* アニメーションの無限繰り返しの指定 */
}
/* ------------------------------------
アニメーションのタイミングとボックスの
拡大率、角度、透過率の指定
------------------------------------*/
@keyframes shine-run {
0% {
transform: scale(0) rotate(50deg);
/* アニメ開始時は大きさ0、50度の傾き */
opacity: 0;
/* アニメ開始時は全透過 */
}
40% {
transform: scale(1) rotate(50deg);
/* 40%まで進む間に大きさを等倍に。傾きは50度のまま*/
opacity: 1;
/* 透過しない（しっかり表示される）ように1を設定 */
}
100% {
transform: scale(250) rotate(50deg);
/* 最後は元の大きさの250倍になるようにする。傾きは50度のまま*/
opacity: 0;
/* 全透過になるようにして、徐々に消えるような変化を付ける */
}
}


/*================================================
 *  ページトップへの戻り
 ================================================*/
#page-top{
  display: block;
  position: fixed;
  z-index: 9999;
  bottom: 80px;
  right: 5px;
    width: 2.2em;
    height: 2.2em;
    line-height: 2.2em;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
  text-decoration: none;
  transition: .5s;
}
#page-top{background:#fff;}
#page-top:hover{background:#fff;}
#page-top a{font-size:1em; color:#444; text-decoration:none;}
#page-top a:hover{font-size:1.1em; opacity: 0.8;}
@media print, screen and (min-width: 1000px){
#page-top{ bottom: 20px;}
}