@charset"utf-8";

/*==================== 基本スタイル（共通） ====================*/
@font-face {
font-family:YuGothicM;
src:local("Yu Gothic Medium");
font-display:swap;
}

html{
  scroll-behavior: smooth;
  scroll-padding-top: 150px;
}

body {
height: 100%;
xbackground-color: #000;
background-color: #fff;
font-family:"M PLUS Rounded 1c","ヒラギノ丸ゴ ProN W4";
xfont-family: "Roboto","Noto Sans JP","Yu Gothic","ヒラギノ角ゴ ProN",sans-serif;
font-weight: 400;
font-style: normal;
font-size:medium;

padding:0;
line-height:2;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;


}


a {
transition: color 0.3s ease 0s;
text-decoration: none;
}

a:link{
xcolor: #fff;
color: #000;
}

a:visited{
xcolor: #fff;
color: #8442a2;
}

a:hover{
color: #ff683a;
}




a img {
border-style: none;
}
p {
margin-bottom: 1em;
}
ul {
list-style-type: none;
}
ol {
margin: 0 0 0 2em;
}
hr {
display:none;
}
dd {
padding: 0;
margin: 0;
}
strong {
font-size: 120%;
}

.green {
color: #009340;
}
.red {
color: #f21212;
}
.darkred {
color: #b20000;
}
.purplered {
color: #C8113D;
}
.coralPink {
color: #af4d63;
}
.blue {
color: #0075C2;
}
.darkblue {
color: #0E3095;
}
.skyblue {
color: #00b4ff !important;
}
.lightblue {
color: #00a0e9;
}
.gray {
color: #707070;
}
.bluegreen {
color: #00cb99;
}
.brown {
color: #733e00;
}
.orange {
color: #f28f0e !important;
}
.lightgreen
{
color: #A6FF69 !important;
}

.yellow {
color: #ffdc1b !important;
}

.white {
color: #ffffff;
}
.koboldbrown {
color: #e5ddd1 !important
}

.bk-lightgray {
background-color: #f3f3f3 !important;
}

.bk-koboldbrown {
background-color: #f6f2eb !important;
}
.bk-lightblue {
background-color: #BAE3F9 !important
}
.bk-lightred {
background-color: #ffd1d3 !important
}
.bk-darkred {
color: #fff;
background-color: #b20000;
}

.floatclear {
clear: both;
}
.textleft {
text-align: left !important;
}
.textright {
text-align: right !important;
}
.textcenter {
text-align: center !important;
}
.line01 {
border-color: #ccc;
border-style: solid;
border-width: 0 0 1px 0;
padding: 0 0 15px 0;
margin: 0 0 1.5em 0;
}
.line02 {
border-color: #ccc;
border-style: solid;
border-width: 1px 0;
padding: 25px 0;
margin: 2em 0;
}
.lineBox01 {
xwidth: 80%;
border-color: #3e3c3c;
border-style: solid;
border-width: 1px;
padding: 20px;
margin: 3em 0;
background-color: #fff;
}

.lineBox01 > p:last-child,
.lineBox02 > p:last-child {
margin: 0;
}

.lineBox02 {
  border-color: #3e3c3c;
  border-style: dashed;
  border-width: 1px 0;
  padding: 2em 0;
  margin: 3em 0;
  background-color: #fff;
}

.discList {
list-style-type: disc;
margin: 0 0 0 20px;
}

.discList > li {
margin:0 0 1em 0;
line-height: 150%;
}

.discList > li:last-child {
margin:0;
}

.width100 {
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.width-auto {
width: auto !important;
}
.px10 {
font-size: 10px !important;
}
.px12 {
font-size: 12px !important;
}
.px14 {
font-size: 14px !important;
}
.px16 {
font-size: 130% !important;
}
.px18 {
font-size: 140% !important;
line-height: 130%;
}
.px10h {
font-size: 10px;
line-height: 130%;
}
.px12h {
font-size: 12px;
line-height: 150%;
}
.px14h {
font-size: 14px;
line-height: 130%;
}
.l-height1 {
line-height: 1;
}
.l-height2 {
line-height: 2;
}
.p60 {
font-size: 60%;
}
.p80 {
font-size: 80%;
}
.p90 {
font-size: 90%;
}
.p120 {
font-size: 120%;
}
.p140 {
font-size: 140%;
}
.p160 {
font-size: 160%;
}
.p180 {
font-size: 180%;
}
.p200 {
font-size: 200%;
}
.p220 {
font-size: 220%;
}
.p300 {
font-size: 300%;
}
.p350 {
font-size: 350%;
}
.mtp1 {
margin-top: 1em
}
.mtp2 {
margin-top: 2em
}
.mtp3 {
margin-top: 3em
}
.mbp1 {
margin-bottom: 1em
}
.mbp2 {
margin-bottom: 2em
}
.mbp3 {
margin-bottom: 3em
}
.mt10 {
margin-top: 10px
}
.mt15 {
margin-top: 15px
}
.mt20 {
margin-top: 20px
}
.mt30 {
margin-top: 30px
}
.mt40 {
margin-top: 40px
}
.mt50 {
margin-top: 50px
}
.pt10 {
padding-top: 10px
}
.pt15 {
padding-top: 15px
}
.pt20 {
padding-top: 20px
}
.mb5 {
margin-bottom: 5px !important
}
.mb10 {
margin-bottom: 10px !important
}
.mb15 {
margin-bottom: 15px !important
}
.mb20 {
margin-bottom: 20px !important
}
.mb30 {
margin-bottom: 30px !important
}
.mb50 {
margin-bottom: 50px !important
}
.pb10 {
padding-bottom: 10px !important
}
.pb15 {
padding-bottom: 15px !important
}
.pb20 {
padding-bottom: 20px !important
}
.ml10 {
margin-left: 10px !important
}
.ml15 {
margin-left: 15px !important
}
.ml20 {
margin-left: 20px !important
}
.pl10 {
padding-left: 10px !important
}
.pl15 {
padding-left: 15px !important
}
.pl20 {
padding-left: 20px !important
}
.mr10 {
margin-right: 10px !important
}
.mr15 {
margin-right: 15px !important
}
.mr20 {
margin-right: 20px !important
}
.pr10 {
padding-right: 10px !important
}
.pr15 {
padding-right: 15px !important
}
.pr20 {
padding-right: 20px !important
}
.mincho {
font-family:"Noto Serif JP","Yu Mincho","ヒラギノ明朝 ProN",serif;
}
.marumoji {
font-family:"M PLUS Rounded 1c","ヒラギノ丸ゴ ProN W4";
}
.alphabet {
font-family: "Montserrat", sans-serif;
}
table {
width: auto;
border-collapse: collapse;
margin: 0 0 1em 0;
border-width: 2px;
border-color: #111;
table-layout: fixed;
word-break: break-word;
word-wrap: break-word;
}

th {
width: auto;
padding: 10px;
border-style: solid;
border-width: 1px;
border-color: #999;
vertical-align: middle;
xbackground-color: #222;
background-color: #e4e5e5;
font-weight: normal;
text-align: center;

word-break: break-word;
word-wrap: break-word;
}
td {
width: auto;
font-size: 90%;
xtext-align: left;
padding: 10px;
border-style: solid;
border-width: 1px;
border-color: #999;
xbackground-color: #444;
background-color: #fff;
vertical-align: middle;

word-break: break-word;
word-wrap: break-word;
}

input
{
xpadding: 10px;
xmargin: 5px;
xfont-size: 100%;
}
textarea
{
xpadding: 10px;
xmargin: 5px;
xfont-size: 100%;
xwidth: 100%;
}
select {
xheight: 36px;

padding: 20px ;
font-size: 100%;
color: #000;
border-color: #000;
border-style: solid;
border-width: 1px;
}

optgroup{
  font-size: 90%;
}


option {
font-size: 110%;
}



/* ios ボタンスタイル解除*/
input[type="submit"],
input[type="button"] {
-webkit-appearance: none;
}

.end {
margin: 0 !important;
padding: 0 !important;
}
.vertical-top {
vertical-align: top;
}
.middle {
vertical-align: middle;
}
.tel-font {
font-family: 'Roboto', sans-serif;
}
.newicon {
font-size: 14px;
color: #f55800;
font-weight: bold;
font-family:Century Gothic, Arial, Lucida Sans, Stone Sans OS ITC TT-Semi;
}
.radius {
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;
}
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/

.textcenter-pc {
text-align: center !important;
}
.image-shadow {
xbox-shadow: 20px 20px 0 #d9d9d9;
box-shadow:20px 20px 0 #58536f;
margin: 0 20px 20px 20px;
}

.number-index{
font-family: "Montserrat", sans-serif;
font-size: 200%;
font-weight: bold;
margin: 0 15px 0 0;
}


.uni-List > li {
display: inline-block;
vertical-align: top;
}
.uni-List-bm > li {
display: inline-block;
vertical-align: bottom;
}

.uni-List-p05 > li {
display:inline-block;
vertical-align:bottom;
padding: 5px;
}

.uni-List-menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
 }

.uni-List-menu > li {
line-height: 100%;
padding: 0 15px;
margin: 0;
border-style: solid;
border-color: #ccc;
border-width: 0 1px 0 0;
}

.uni-List-menu > li:last-child {
border-style: none;
}



html #error,
html .error {
color: #e33f1f;
font-size: 100%;
font-weight: bold;
display: block;
text-align: left;
padding: 5px;
}

html #error .reb-bg,
html .error.reb-bg {
color: #fff;
font-size: 100%;
font-weight: bold;
display: block;
text-align: left;
padding: 10px 15px;

width: 100%;
background: #e33f1f;
}

section {
display: block;
padding: 0;
margin: 0;
xoverflow: hidden;
}

/*==================== ページ構成スタイル（共通） ====================*/

.rightArea {
xwidth: 48%;
float:right;
}
.leftArea {
xwidth: 48%;
float:left;
}
div#toplink {
text-align: right;
font-size: 70%;
xborder-color: #898989;
xborder-style: solid;
xborder-width: 0 0 1px 0;
margin: 0 auto;
padding: 0 0 5px 0;
}
div#toplink p {
margin: 0 1em 0 0;
}
div#toplink a:link {
color:#fff;
}
div#toplink a:visited {
color:#fff;
}
div#toplink a:hover {
color:#FF0000;
text-decoration: underline;
}
div#toplink a:active {
color:#fff;
}



/*====================
コンテンツ共通スタイル
====================*/



div.contents-box-white{
background-color: #fff;
padding: 60px 0;
}

div.contents-box-lightgray{
background-color: #f4f4f4;
padding: 60px 0;
}


div.contents-box-white-bottomend{
background-color: #fff;
padding: 60px 0 0 0;
}

div.contents-box-lightgreen{
background-color: #fcfcee;
padding: 60px 0;
}




div.descriptionBox01{
margin: 0 0 1em 0;
xfont-size: 120%;
}

div.descriptionBox02{
xwidth: 100%;
margin: 0 0 2em 0;
}

div.descriptionBox03{
margin: 0 0 3em 0;
}

div.descriptionBox120{
margin: 0 0 120px 0;
}

div.descriptionBox160{
margin: 0 0 160px 0;
}


.title-style01{
font-size: 130%;
line-height: 145%;
position: relative;
border-style: solid;
border-width: 0 0 3px 0;
border-color: #a40000;
padding: 15px;
margin: 1em 0 2em 0;
color: #2F2F2F;

  &::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 20%;
  height: 3px;
  background-color: #ff9627;
  }

}


.title-style02{
font-size: 130%;
line-height: 145%;
position: relative;
padding: 15px;
margin: 1em 0 2em 0;
color: #fff;
background-color: #000;
text-align: center;

  &::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #000;
  }

}


.title-style03{
font-size: 130%;
line-height: 145%;
position: relative;
padding: 15px;
margin: 1em 0 2em 0;
color: #fff;
background-color: #370000;
text-align: center;

  &::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #370000;
  }

}


.title-style04{

font-family: "M PLUS 1p",'メイリオ',sans-serif;
font-size: 130%;
line-height: 145%;
position: relative;
padding: 15px;
margin: 0 0 1em 0;

display: flex;
justify-content: center;
align-items: center;

  &::before {
    width: 3px;
    height: 50px;
    background-color: #a40000;
    content: '';

    transform: rotate(-35deg);
    margin-right: 30px;
  }


  &::after {
    width: 3px;
    height: 50px;
    background-color: #a40000;
    content: '';
    transform: rotate(35deg);
    margin-left: 30px;
  }
}




.subtitle-style01 {

padding: 20px 15px;
margin: 0 0 2em 0;
font-size: 120%;
font-weight: bold;
line-height: 100%;

text-align: center;
background-color: #8a2f6b;
color: #fff;

}

.subtitle-style02 {
position: relative;
text-align: left;
font-size: 120%;
border-style: solid;
line-height: 145%;
border-width: 0 0 0 5px;
border-color: #cf1370;
padding: 5px 15px;
  margin: 0 0 1em 0;

}



.num #pagenavi-area {
text-align: center;
background-color: #f6f4f2;
margin: 0 auto;
padding: 20px 0;
}


.hide {
display: none;
}


dl.index-list {}

dl.index-list > dt {
font-weight: bold;
margin: 0 0 1em 0 !important;
padding: 10px 20px !important;
background-color: #eaeaea;
font-size: 110%;

}

dl.index-list > dd {
padding: 10px 0 !important;
margin: 0 0 2em 0 !important;
}

dl.index-list > dd p:last-child {
margin: 0;
}



.accessmap-google{
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 比率を16:9に固定 */
}

.accessmap-google > iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


img.saturation{
xfilter: saturate(30%);
filter: saturate(100%);
}

img.saturation:hover{
xfilter: saturate(120%);
filter: saturate(30%);
transition: 0.3s ease 0s;
}


/*====================
動き用（共有）
====================*/




/*====================
ボタンエフェクト用（共有）
====================*/

.button {
text-align: center;
xfont-size: 90%;
}

.button02 {
text-align: center;
xfont-size: 90%;
background-color: #000;
padding: 20px 30px;
border-radius: 20px;
}


.button-line a {
width: 400px;
color: #fff !important;
font-size: 100%;
font-weight: bold;
letter-spacing: 1px;
background: transparent;
padding: 15px 10px;
border: 1px solid #fff;
xborder-radius: 6px;
position: relative;
z-index: 1;
transition: .3s;

text-decoration: none;
display: inline-block;
cursor: pointer;
}
.button-line a::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background: #333;
transform-origin: 100% 50%;
transform: scaleX(0);
transition: transform ease .3s;
}

.button-line a:visited {
  color: #fff !important;
}

.button-line a:hover {
  color: #fff !important;
}
.button-line a:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}


.button-line-bk a {
width: 400px;
color: #000 !important;
background-color: #fff;

font-weight: bold;
letter-spacing: 1px;

background: #fff;
padding: 15px 10px;
border: 1px solid #000;
border-radius: 6px;
position: relative;
z-index: 1;
transition: .3s;

text-decoration: none;
display: inline-block;
cursor: pointer;

}

.button-line-bk a::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background: #333;


transform: scaleX(0);
transition: all 0.5s ease;
transition-property: transform;
}

.button-line-bk a:visited {
  color: #000 !important;
}

.button-line-bk a:hover {
  color: #fff !important;
}
.button-line-bk a:hover::before {
  xtransform-origin: 0% 50%;
  transform: scaleX(1);
}

.button-line-delivery a {
width: 100%;
color: #fff !important;
font-size: 100%;
font-weight: bold;
letter-spacing: 1px;
background: #640000;
padding: 15px 10px;
border: 1px solid #fff;
text-align: center;


position: relative;
z-index: 1;
transition: .3s;

text-decoration: none;
display: inline-block;
cursor: pointer;
}
.button-line-delivery a::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background: #3c0000;
transform-origin: 100% 50%;
transform: scaleX(0);
transition: transform ease .3s;
}

.button-line-delivery a:visited {
  color: #fff !important;
}

.button-line-delivery a:hover {
  color: #fff !important;
}
.button-line-delivery a:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}


/*====================
ページ先頭ボタン
====================*/

.page-top {
display: none;
margin: 0;
padding: 0;
}
.page-top div {
xheight: 80px;
bottom: 20px;
xleft: 0;
right: 20px;

margin: 0;
padding: 0;
position: fixed;
line-height: 1;

z-index: 90;
/* box-sizingリセット */
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-o-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
}
.page-top img {
height: 30px;
vertical-align: center;
}
.move-page-top {
background-color: rgba(128, 128, 128, 0.8);
border-radius: 10px;
color: #fff;
display: block;
xfont-size: 20px;
xheight: 60px;
xline-height: 60px;
text-align: center;
text-decoration: none;
transition: all 0.3s ease 0s;
vertical-align: middle;
xwidth: 60px;
cursor: pointer;
padding: 15px 20px;
}
.page-top a:active,
.page-top a:hover {
color: #fff;
background-color: rgba(255, 108, 0, 0.8);
}


.button-area{

border-style: solid;
border-width: 1px 0;
border-color: #ccc;

padding: 30px 0;

}




/* =========== WordPress用 =========== */


.aligncenter{
display: block;
margin-left: auto;
margin-right: auto;
}
.alignright{
float: right;
margin-left: 1.5em;
}
.alignleft{
float: left;
margin-right: 1.5em;
}




/* =========== フロートバグ補助 =========== */

/* 20110406クラスあり修正版 */
.clearfix {
zoom:1;
xoverflow: hidden; /* 20121112Dreamweaverプレビュー崩れ対策 */
}
.clearfix::after {
content: "";
display: block;
clear: both;
}

/* =========== IE用印刷設定CSS =========== */

@media print {
body {
_zoom: 67%;  /*WinIE only */
}
}


/*====================

システム共有

====================*/

/*==　トグル　==*/


.js_toggle_item{
  cursor: pointer;
}

.js_toggle_item-hidden {
  display: none;
}



/*==　ページ送り（wp-pagenavi）　==*/


.wp-pagenavi {
clear:both;
text-align:center;
padding:30px 0;
xborder-style:solid;
xborder-color:#ccc;
xborder-width:1px 0;
margin:50px 0 0 0;
background-color:#373d6f;
line-height: 2.5;
}

.wp-pagenavi a,.wp-pagenavi span {
color:#999;
background-color:#FFF;
border:solid 1px #e0e0d2;
padding:5px 15px;
margin:0 4px;
white-space:nowrap;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-webkit-transition:0.2s ease-in-out;
-moz-transition:0.2s ease-in-out;
-o-transition:0.2s ease-in-out;
transition:0.2s ease-in-out;
text-align:center;
text-decoration:none;
}

.wp-pagenavi a:link {
color:#222 !important;
}

.wp-pagenavi a:visited {
color:#222 !important;
}

.wp-pagenavi a:hover {
color:#FFF !important;
background-color:#222 !important;
border-color:#222 !important;
}

.wp-pagenavi span.current {
color:#FFF;
background-color:#1c94d3;
border-color:#1c94d3;
font-weight:700;
}


/* =========== Cookie使用同意 =========== */

.cookie-consent {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
z-index: 10;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
width: 50%;
font-size: 14px;
color: #fff;
background: rgba(0,0,0);
xbackground: rgb(255, 255, 255);
padding: 1.2em 2em;
box-sizing: border-box;
visibility: hidden;
box-shadow: 0 0 8px 0 rgba(204, 204, 204, 0.5);
}
.cookie-consent.is-show {
visibility: visible;
}
.cookie-consent a {
xcolor: #fff !important;
}
.cookie-agree {
color: #fff;
background: dodgerblue;
padding: .5em 3em;
border-radius: 5px;
}
.cookie-agree:hover {
cursor: pointer;
}
/* パッと消える */
.cc-hide1 {
display: none;
}
/* ゆっくり消える */
.cc-hide2 {
animation: hide 1s linear 0s;
animation-fill-mode: forwards;
}

.cookie-text a:link{
  color:#ffa600;
}
.cookie-text a:visited{
  color:#ffa600;
}
.cookie-text a:hover{
  color:#ff7f00;
}



@keyframes hide {
from {
  opacity: 1;
}
to {
  opacity: 0;
  visibility: hidden;
}
}




