/***フォント**********************************************START***/
@font-face {
    font-family: 'mplus-1p-light';
    src: url({{ asset('fonts/mplus-1p-regular.ttf') }});
}
/***フォント************************************************END***/

/***基本設定**********************************************START***/
html{
    max-width:3000px;
    width: 100%;
    font-size: 62.5%;
    /*font-size: calc(62.5% + 0.5vw);*/
    margin: 0 auto;
    padding: 0px;
}
*, *::before, *::after {
    box-sizing: border-box;
}
body{
    -webkit-text-size-adjust: 100%;
    width: 100%;
    /*標準（デフォルト）*/
    font-family: "mplus-1p-light" !important;
    word-break: break-all;
    font-size: 1.2rem;
    line-height:1.2em;
    font-weight: 400;
}
footer{
    position:relative;
    user-select: none;
    max-width:3000px;
    width:100%;
    margin-top: auto;
    margin:0 auto;
    padding: 0%;
    background-color:#0a52a4;
    color:#ffffff;
    font-size:1.2rem;
    line-height:2.5em;
    text-align:center;
}
footer .link:hover{
    color: #ffebcc;
    cursor:pointer;
    opacity:0.8;
}
img{
    max-width:800%;
    width: 100%;
    height: auto;
}
a{
    text-decoration: none;
    color:#0a52a5;
}
a:hover{
    cursor:pointer;
    opacity:0.8;
}
#wrapper{
    max-width:4000px;
    width:100%;
    margin-left: auto;
    margin-right: auto;
}
/***基本設定************************************************END***/

/**********************************************************************************/
/*CSSカスタムプロパティ変数（※値の変更不可。変更する場合はHTML側のstyleで変数の値をセット） */
/*styleセット例：<div class="round-line" style="--roundLineColor:#0000ff;">この文字に下線く</div>*/
/**********************************************************************************/
:root{
    /*角丸下線*/
    --roundLineColor:rgba(0,130,201,0.8);
    --roundLineHeight:1px;
}
/*font-size*/
.font-size-sss {
  --txt-font-size: 0.8rem;
}
.font-size-ss {
  --txt-font-size: 1.0rem;
}
.font-size-sm {
  --txt-font-size: 1.4rem;
}
.font-size-m {
  --txt-font-size: 1.6rem;
}
.font-size-mm {
  --txt-font-size: 1.8rem;
}
.font-size-ml {
  --txt-font-size: 2.0rem;
}
.font-size-l {
  --txt-font-size: 2.4rem;
}
.font-size-ll {
  --txt-font-size: 2.8rem;
}
/*line-height*/
.line-height-s {
  --txt-line-height: 1.2em;
}
.line-height-m {
  --txt-line-height: 1.4em;
}
.line-height-l {
  --txt-line-height: 1.6em;
}
.line-height-ll {
  --txt-line-height: 1.8em;
}
/*font-weight*/
.font-weight-m {
  --txt-font-weight: 700;
}
.font-weight-l {
  --txt-font-weight: 900;
}
/*txt-align*/
.align-left{
    --txt-align:left;
}
.align-right{
    --txt-align:right;
}
/*txt-align*/
.vertical-align-top{
    --vertical-align: top;
}
.vertical-align-bottom{
    --vertical-align: bottom;
}
/*line-radius*/
.line-radius-15{
    --line-radius: 15px;
}
.line-radius-25p{
    --line-radius: 25%;
}
/*ボタンのサイズ設定*/
.size-ss {
  --btn-width: 10rem;
  --btn-font-size: 1.3rem;
  --btn-padding: 1.0rem 1.2rem;
}
.size-s {
  --btn-width: 20rem;
  --btn-font-size: 1.4rem;
  --btn-padding: 1.0rem 1.6rem;
}
.size-m {
  --btn-width: 25rem;
  --btn-font-size: 1.5rem;
  --btn-padding: 1.0rem 2rem;
}
.size-l {
  --btn-width: 30rem;
  --btn-font-size: 1.6rem;
  --btn-padding: 1.0rem 2.4rem;
}
.size-half {
  --btn-width: 50%;
  --btn-font-size: 1.6rem;
  --btn-padding: 1.0rem 2.4rem;
}
.size-full {
  --btn-width: 100%;
  --btn-font-size: 2.0rem;
  --btn-padding: 1.0rem 2.4rem;
}
/*txt-color*/
.txt-color-caution {
  --txt-color: #ff0000;
}
.font-color-link{
  --font-color: #0099ff;
  --hover-color: #40c4ff;
}
.text-bg-color-black{
    --bg-color: black;
    --txt-color:white;
}
.text-bg-color-white{
    --bg-color: white;
    --txt-color:black;
}
/*ボタン角*/
.radius-10{
    --btn-radius: 10px;
}
.radius-50{
    --btn-radius: 50px;
}
/*ボタンの塗りつぶしボタンのカラー設定*/
.color-yellow {
    --btn-bg: #ecde21; --btn-color: #ffffff; --btn-border: #ecde21;
    --btn-hover-bg: #f7ef73; --btn-hover-color: #f0f0f0; --btn-hover-border: #f7ef73;
    --btn-box-shadow: 0 1px 2px rgba(200, 180, 60, 0.3);
    --btn-icon-bg: #ffffff;     /* 丸アイコン背景 */
    --btn-icon-color: #ecde21;  /* 丸アイコン文字 */
    --btn-cursor: pointer;
    --txt-align: center;
    --card-bg: #ffffe5;
}
.color-green {
    --btn-bg: #7ab943; --btn-color: #ffffff; --btn-border: #7ab943;
    --btn-hover-bg: #8dd85a; --btn-hover-color: #f0f0f0; --btn-hover-border: #8dd85a;
    --btn-box-shadow: 0 1px 2px rgba(120, 170, 80, 0.35);
    --btn-icon-bg: #ffffff;     /* 丸アイコン背景 */
    --btn-icon-color: #7ab943;  /* 丸アイコン文字 */
    --btn-cursor: pointer;
    --txt-align: center;
    --card-bg: #ebf5e3;
}
.color-orange {
    --btn-bg: #e7831e; --btn-color: #ffffff; --btn-border: #e7831e;
    --btn-hover-bg: #f4a54f; --btn-hover-color: #f0f0f0; --btn-hover-border: #f4a54f;
    --btn-cursor: pointer;
    --btn-box-shadow: 0 1px 2px rgba(210, 140, 60, 0.4);
    --btn-icon-bg: #ffffff;     /* 丸アイコン背景：白 */
    --btn-icon-color: #e7831e;  /* 丸アイコン文字：青 */
    --txt-align: center;
    --card-bg: #fcf3ed;
}
.color-aqua {
    --btn-bg: #62c1de; --btn-color: #ffffff; --btn-border: #62c1de;
    --btn-hover-bg: #7bd5f0; --btn-hover-color: #f0f0f0; --btn-hover-border: #7bd5f0;
    --btn-cursor: pointer;
    --btn-box-shadow: 0 1px 2px rgba(80, 180, 200, 0.4);
    --btn-icon-bg: #ffffff;     /* 丸アイコン背景 */
    --btn-icon-color: #62c1de;  /* 丸アイコン文字 */
    --txt-align: center;
    --card-bg: #e6f5fa;
}
.color-mint {
    --btn-bg: #41bcb4; --btn-color: #ffffff; --btn-border: #41bcb4;
    --btn-hover-bg: #65d4cd; --btn-hover-color: #f0f0f0; --btn-hover-border: #65d4cd;
    --btn-cursor: pointer;
    --btn-box-shadow: 0 1px 2px rgba(90, 200, 190, 0.35);
    --btn-icon-bg: #ffffff;     /* 丸アイコン背景 */
    --btn-icon-color: #41bcb4;  /* 丸アイコン文字 */
    --txt-align: center;
    --card-bg: #ffffe5;
}
.color-blue {
    --btn-bg: #4875ca; --btn-color: #ffffff; --btn-border: #4875ca;
    --btn-hover-bg: #6f95e0; --btn-hover-color: #f0f0f0; --btn-hover-border: #6f95e0;
    --btn-cursor: pointer;
    --btn-box-shadow: 0 1px 2px rgba(80, 120, 200, 0.4);
    --btn-icon-bg: #ffffff;     /* 丸アイコン背景 */
    --btn-icon-color: #4875ca;  /* 丸アイコン文字 */
    --txt-align: center;
    --card-bg: #eef3fb;
}
.color-pink {
    --btn-bg: #ff7ca0; --btn-color: #ffffff; --btn-border: #ff7ca0;
    --btn-hover-bg: #ff9bb8; --btn-hover-color: #f0f0f0; --btn-hover-border: #ff9bb8;
    --btn-cursor: pointer;
    --btn-box-shadow: 0 1px 2px rgba(200, 100, 120, 0.45);
    --btn-icon-bg: #ffffff;     /* 丸アイコン背景 */
    --btn-icon-color: #ff7ca0;  /* 丸アイコン文字 */
    --txt-align: center;
    --card-bg: #fff3f6;
}
.color-skyblue {
    --btn-bg: #3f99e5; --btn-color: #ffffff; --btn-border: #3f99e5;
    --btn-hover-bg: #5aa5f7; --btn-hover-color: #f0f0f0; --btn-hover-border: #5aa5f7;
    /*--btn-hover-bg: #3f99e5; --btn-hover-color: #ffffff; --btn-hover-border: #3f99e5;*/
    --btn-cursor: pointer;
    --btn-box-shadow: 0 1px 2px rgba(160, 160, 192, 0.5);
    --btn-icon-bg: #ffffff;     /* 丸アイコン背景 */
    --btn-icon-color: #3f99e5;  /* 丸アイコン文字 */
    --txt-align: center;
    --card-bg: #3f99e5;
}
.color-skypink {
    --btn-bg: #ff7ca0; --btn-color: #ffffff; --btn-border: #ff7ca0;
    --btn-hover-bg: #ff95b5; --btn-hover-color: #f0f0f0; --btn-hover-border: #ff95b5;
    /*--btn-hover-bg: #ff7ca0; --btn-hover-color: #ffffff; --btn-hover-border: #ff7ca0;*/
    --btn-cursor: pointer;
    --btn-box-shadow: 0 1px 2px rgba(160, 160, 192, 0.5);
    --btn-icon-bg: #ffffff;     /* 丸アイコン背景 */
    --btn-icon-color: #ff7ca0;  /* 丸アイコン文字 */
    --txt-align: center;
    --card-bg: #ff7ca0;
}
.color-cleanness {
    --btn-bg: rgba(255,255,255,0); --btn-color: #d52e7d; --btn-border: #e375a7;
    --btn-hover-bg: rgba(255,255,255,0); --btn-hover-color: #d52e7d; --btn-hover-border: #e375a7;
    --btn-cursor: default;
    --btn-box-shadow: 0 0px 0px rgba(255, 255, 255, 0);
    --btn-icon-bg: rgba(255,255,255,0);     /* 丸アイコン背景 */
    --btn-icon-color: #d52e7d;  /* 丸アイコン文字 */
    --txt-align: center;
    --card-bg: rgba(255,255,255,0);
}
.button_custom.color-cleanness:hover {
    /* 外側の枠はそのまま、内側に擬似枠を描画 */
    box-shadow: inset 0 0 0 1px rgba(227, 117, 167, 0.5);
    opacity:0.8;
    cursor:pointer;
}
/*枠線ボタンのカラー設定*/
.color-outline-blue {
    --btn-bg: #ffffff; --btn-color: #0068b4; --btn-border: #0068b4;
    --btn-hover-bg: #0068b4; --btn-hover-color: #ffffff; --btn-hover-border: #0068b4;
}
/*ボタンのサイズ設定*/
.size-ss {
  --btn-width: 10rem;
  --btn-font-size: 1.0rem;
  --btn-padding: 1.0rem 1.2rem;
}
.size-s {
  --btn-width: 20rem;
  --btn-font-size: 1.4rem;
  --btn-padding: 1.0rem 1.6rem;
}
.size-m {
  --btn-width: 25rem;
  --btn-font-size: 1.5rem;
  --btn-padding: 1.0rem 2rem;
}
.size-l {
  --btn-width: 30rem;
  --btn-font-size: 1.6rem;
  --btn-padding: 1.0rem 2.4rem;
}
.size-half {
  --btn-width: 50%;
  --btn-font-size: 1.4rem;
  --btn-padding: 1.0rem 2.0rem;
}
.size-tqs {
  --btn-width: 75%;
  --btn-font-size: 1.2rem;
  --btn-padding: 1.0rem 1.0rem;
}
.size-full {
  --btn-width: 100%;
  --btn-font-size: 2.0rem;
  --btn-padding: 1.0rem 2.4rem;
}
/*btn-content*/
.btn-content-arrow{
    --btn-content:'>';
}

/***テーブル処理設定（共通）****************************START***/
/* table_itemのwidthは要素側のstyleで設定してください          */
/* 未指定時はデフォルトの50%となります。                       */
/***************************************************************/
.table_box{
    display: table;
    max-width: 100%;
    width: 100%;
    vertical-align: middle;
}
.table_item{
    display: table-cell;
    max-width: 100%;
    width: 50%;
    vertical-align: middle;
}


/***共通処理**********************************************START***/
/*下線（※値の変更不可。変更する場合はHTML側のstyleで変数の値をセット）*/
.round-line:after{
    display: block;
    background-color:var(--roundLineColor);
    border-radius:5px;
    content: "";
    height:var(--roundLineHeight);
}

/***カスタムボタン設定************************************START***/
/*カスタムボタン*/
.button_custom{
    display: inline-block;
    max-width: 800px;
    padding: var(--btn-padding, 1rem 2rem);
    width: var(--btn-width, auto);
    font-size: var(--btn-font-size, 1.2rem);
    line-height: var(--txt-line-height, 1.0em);
    font-weight: var(--txt-font-weight, 400);
    border-radius: var(--btn-radius, 25px);
    text-align: var(--txt-align, center);
    text-decoration: none;
    cursor: var(--btn-cursor, pointer);
    transition: all 0.3s ease;
    /*white-space: nowrap;*/ /* ← 改行を防ぐ */
    overflow: hidden;
    text-overflow: ellipsis; /* 長い場合は省略記号に */
    
    background-color: var(--btn-bg, #fff);
    color: var(--btn-color, #000);
    border: var(--btn-border-weight, 2px) solid var(--btn-border, #ccc);
}
/*ボタンのhover時設定*/
.button_custom:hover{
    background-color: var(--btn-hover-bg, #ffffff);
    color: var(--btn-hover-color, #000000);
    border-color: var(--btn-hover-border, #000000);
    cursor: default;
    box-shadow: var(--btn-box-shadow, 0 1px 2px rgba(227, 117, 167, 0.5));
}
/*ボタン三角アイコン設定*/
.button-triangle-icon {
    position: relative;
    padding-right: 40px; /* アイコン分の余白 */
    display: inline-block;
    vertical-align: middle;
}
.button-triangle-icon::after {
    content: var(--btn-content, '▶');
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--btn-icon-bg, #fff);
    color: var(--btn-icon-color, #000);
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    pointer-events: none;
    border: none; /* 枠線は無し */
    padding-left: 4px;
}
/***カスタムボタン設定**************************************END***/

/***汎用系処理********************************************START***/
/*汎用テキスト*/
.custom_text{
    padding:1% 2% 1% 2%;
    font-size: var(--txt-font-size, 1.2rem);
    font-weight: var(--txt-font-weight, 400);
    line-height: var(--txt-line-height, 1.2em);
    text-align: var(--txt-align, center);
    vertical-align: var(--vertical-align, middle);
    color: var(--txt-color, inherit);
    background: var(--bg-color, inherit);
    border-radius: var(--line-radius, 0px);
}
/***汎用系処理**********************************************END***/


/***個別ページ設定****************************************START***/
.sub_palet{
    padding:3%;
}
/***個別ページ設定******************************************END***/