@charset "UTF-8";
html {
  font-size: 16px;
  font-family: "Noto Serif JP",serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  background: #FAFAFA;
}

body {
  font-size: 120%;
  overflow-x: hidden;
}

.fontAwesome{
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  display: inline-block;
}

.fontAwesome:before{
  padding: 0 6px;
}

p,
table tr th,
table tr td,
dl dt,
dl dd {
  font-size: 100%;
  margin:0;
}

img {max-width: 100%;}

.image_content .pc , .image_text_content .pc{
  display: inline;
}

.image_content .tb , .image_text_content .tb{
  display: none;
}

.image_content .sp , .image_text_content .sp{
  display: none;
}

@media (max-width: 1200px) {
  .image_content .pc , .image_text_content .pc{
    display: none;
  }

  .image_content .tb , .image_text_content .tb{
    display: inline;
  }

  .image_content .sp , .image_text_content .sp{
    display: none;
  }
}


@media (max-width: 768px) {
  p,
  table tr th,
  table tr td,
  dl dt,
  dl dd {
    font-size: 90%; }

  .image_content .pc , .image_text_content .pc{
    display: none;
  }

  .image_content .tb , .image_text_content .tb{
    display: none;
  }

  .image_content .sp , .image_text_content .sp{
    display: inline;
  }
}

@media (max-width: 320px) {
  p,
  table tr th,
  table tr td,
  dl dt,
  dl dd {
    font-size: 85%; } }

/* 10px */
body {
  font-family: 'ヒラギノ丸ゴ ProN W4', 'Hiragino Maru Gothic ProN', "Helvetica Neue", YuGothic, sans-serif;
  font-size: 90%;
  color: #2c2c2c;
  line-height: 1.8; }

/* container */
@media (min-width: 320px) {
  .container {
    max-width: 100%; } }

@media (min-width: 576px) {
  .container {
    max-width: 100%; } }

@media (min-width: 768px) {
  .container {
    max-width: 100%; }
  .s-container {
    max-width: 560px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px; }
  .s-container {
    max-width: 560px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px; }
  .s-container {
    max-width: 560px;
  }
}

main > .inner {
  margin-top: 72px;
}

.container{
  margin-top: 50px;
}

/*==================================================================
	Common style
===================================================================*/
.center	{ text-align: center; }
.left {	text-align: left; }
.right { text-align: right; }
.middle { vertical-align: middle; }
.underline { text-decoration:underline; }
.blink { text-decoration:blink; }

.leftBox { float: left; }
.rightBox { float: right; }
.clearBox { float:none !important; }

.clearfix { zoom:1; }
.clearfix:after{ content: ""; display: block; clear: both;}
.clear{	clear:both;	}

.relative {	position:relative;}
.none { display:none; }
.spot { position:absolute; right:0; top:0; }
.auto {margin-left:auto; margin-right:auto;}
.block { display:block !important; }
.fixed { table-layout:fixed; }
.floatfix {	overflow: hidden;	_zoom: 1;}

.ba0 { border:0 !important; }
.r5 { border-radius:5px !important; }
.r10 { border-radius:5px !important; }

.f10 { font-size:77% !important; }  
.f11 { font-size:85% !important; }  
.f12 { font-size:93% !important; }  
.f14 { font-size:108% !important; } 
.f15 { font-size:116% !important; } 
.f16 { font-size:123.1% !important; } 
.f17 { font-size:131% !important; } 
.f18 { font-size:138.5% !important; } 
.f19 { font-size:146.5% !important; } 
.f20 { font-size:153.9% !important; } 
.f21 { font-size:161.6% !important; } 
.f22 { font-size:167% !important; } 
.f23 { font-size:174% !important; } 
.f24 { font-size:182% !important; } 
.f25 { font-size:189% !important; } 
.f26 { font-size:197% !important; } 

.l0 {line-height:0 !important; }
.l1 {line-height:1 !important; }
.l11 {line-height:1.1 !important; }
.l12 {line-height:1.2 !important; }
.l13 {line-height:1.3 !important; }
.l14 {line-height:1.4 !important; }
.l15 {line-height:1.5 !important; }
.l16 {line-height:1.6 !important; }
.l17 {line-height:1.7 !important; }
.l18 {line-height:1.8 !important; }
.l19 {line-height:1.9 !important; }
.l20 {line-height:2 !important; }

.w100 {width:100% !important; }
.w90 {width:90% !important; }
.w80 {width:80% !important; }
.w70 {width:70% !important; }
.w60 {width:60% !important; }
.w50 {width:50% !important; }
.w40 {width:40% !important; }
.w30 {width:30% !important; }
.w20 {width:20% !important; }
.w10 {width:10% !important; }

.pt0,  .pv0,  .pa0  { padding-top:     0px !important; }
.pr0,  .ph0,  .pa0  { padding-right:   0px !important; }
.pb0,  .pv0,  .pa0  { padding-bottom:  0px !important; }
.pl0,  .ph0,  .pa0  { padding-left:    0px !important; }
.pt5,  .pv5,  .pa5  { padding-top:     5px !important; }
.pr5,  .ph5,  .pa5  { padding-right:   5px !important; }
.pb5,  .pv5,  .pa5  { padding-bottom:  5px !important; }
.pl5,  .ph5,  .pa5  { padding-left:    5px !important; }
.pt10, .pv10, .pa10 { padding-top:    10px !important; }
.pr10, .ph10, .pa10 { padding-right:  10px !important; }
.pb10, .pv10, .pa10 { padding-bottom: 10px !important; }
.pl10, .ph10, .pa10 { padding-left:   10px !important; }
.pt15, .pv15, .pa15 { padding-top:    15px !important; }
.pr15, .ph15, .pa15 { padding-right:  15px !important; }
.pb15, .pv15, .pa15 { padding-bottom: 15px !important; }
.pl15, .ph15, .pa15 { padding-left:   15px !important; }
.pt20, .pv20, .pa20 { padding-top:    20px !important; }
.pr20, .ph20, .pa20 { padding-right:  20px !important; }
.pb20, .pv20, .pa20 { padding-bottom: 20px !important; }
.pl20, .ph20, .pa20 { padding-left:   20px !important; }
.pt25, .pv25, .pa25 { padding-top:    25px !important; }
.pr25, .ph25, .pa25 { padding-right:  25px !important; }
.pb25, .pv25, .pa25 { padding-bottom: 25px !important; }
.pl25, .ph25, .pa25 { padding-left:   25px !important; }
.pt30, .pv30, .pa30 { padding-top:    30px !important; }
.pr30, .ph30, .pa30 { padding-right:  30px !important; }
.pb30, .pv30, .pa30 { padding-bottom: 30px !important; }
.pl30, .ph30, .pa30 { padding-left:   30px !important; }

.mt0,  .mv0,  .ma0  { margin-top:      0px !important; }
.mr0,  .mh0,  .ma0  { margin-right:    0px !important; }
.mb0,  .mv0,  .ma0  { margin-bottom:   0px !important; }
.ml0,  .mh0,  .ma0  { margin-left:     0px !important; }
.mt5, .mv5, .ma5 	{ margin-top:      5px !important; }
.mr5, .mh5, .ma5 	{ margin-right:    5px !important; }
.mb5, .mv5, .ma5 	{ margin-bottom:   5px !important; }
.ml5, .mh5, .ma5 	{ margin-left:     5px !important; }
.mt10, .mv10, .ma10 { margin-top:     10px !important; }
.mr10, .mh10, .ma10 { margin-right:   10px !important; }
.mb10, .mv10, .ma10 { margin-bottom:  10px !important; }
.ml10, .mh10, .ma10 { margin-left:    10px !important; }
.mt15, .mv15, .ma15 { margin-top:     15px !important; }
.mr15, .mh15, .ma15 { margin-right:   15px !important; }
.mb15, .mv15, .ma15 { margin-bottom:  15px !important; }
.ml15, .mh15, .ma15 { margin-left:    15px !important; }
.mt20, .mv20, .ma20 { margin-top:     20px !important; }
.mr20, .mh20, .ma20 { margin-right:   20px !important; }
.mb20, .mv20, .ma20 { margin-bottom:  20px !important; }
.ml20, .mh20, .ma20 { margin-left:    20px !important; }
.mt25, .mv25, .ma25 { margin-top:     25px !important; }
.mr25, .mh25, .ma25 { margin-right:   25px !important; }
.mb25, .mv25, .ma25 { margin-bottom:  25px !important; }
.ml25, .mh25, .ma25 { margin-left:    25px !important; }
.mt30, .mv30, .ma30 { margin-top:     30px !important; }
.mr30, .mh30, .ma30 { margin-right:   30px !important; }
.mb30, .mv30, .ma30 { margin-bottom:  30px !important; }
.ml30, .mh30, .ma30 { margin-left:    30px !important; }
.mt50{ margin-top: 50px !important; }

.m10 {margin: 10px !important; }
.m20 {margin: 20px !important; }
.m30 {margin: 30px !important; }

.xx-large {font-size: 145%; line-height: 100%;}
.x-large {font-size: 130%;  line-height: 100%;}
.large {font-size: 115%;}
.midium {}
.small {font-size: 90%;}
.x-small {font-size: 80%;}
.xx-small {font-size: 75%;}
.help { color: #E74C3C; }

.disc{ padding-left:2em;list-style:disc; }
.circle { padding-left:2em;list-style:circle; }
.decimal { padding-left:2.4em;list-style:decimal; }
.inline dt, .inline dd, .inline li { display:inline; padding-right:5px; }
.inlineBlock dt, .inlineBlock dd, .inlineBlock li { display: -moz-inline-box; display: inline-block; *display: inline; *zoom: 1; padding-right:5px; }

.float7 li{	float:left;	width:11%	}
.float6 li{	float:left;	width:16%;	}
.float5 li{	float:left;	width:19%;	}
.float4 li{	float:left;	width:24%;	}
.float3 li{	float:left;	width:32%;	}
.float2 li{	float:left;	width:49%;	}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: .5rem; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: 0.5rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit; }

h1, .h1 {
  font-size: 200%; }

h2, .h2 {
  font-size: 185%; }

h3, .h3 {
  font-size: 165%; }

h4, .h4 {
  font-size: 150%; }

h5, .h5 {
  font-size: 135%; }

h6, .h6 {
  font-size: 110%; }

@media screen and (max-width: 46.8125em) and (min-width: 0em){
  h1, .h1 {
    font-size: 180%; }

  h2, .h2 {
    font-size: 165%; }

  h3, .h3 {
    font-size: 155%; }

  h4, .h4 {
    font-size: 140%; }

  h5, .h5 {
    font-size: 125%; }

  h6, .h6 {
    font-size: 100%; }
}

.btn-area{
    margin-top: 1rem !important;
    text-align:center;
}

.btn-lg {
    width: 250px;
}

.btn-normal{
    color: #333;
    background-color: #AAAAAAAA !important;
    border-color: #AAAAAAAA !important;
}

.btn-normal:hover{
    color: #fff;
    background-color: #555555 !important;
    border-color: #555555 !important;
}


button {
    background: #966600;
}

div.message {
    text-align: center;
    cursor: pointer;
    display: block;
    font-weight: normal;
    padding: 0 1.5rem 0 1.5rem;
    transition: height 300ms ease-out 0s;
    background-color: #a0d3e8;
    color: #626262;
    top: 15px;
    right: 15px;
    z-index: 999;
    overflow: hidden;
    height: 50px;
    line-height: 2.5em;
}

div.message:before {
    line-height: 0px;
    font-size: 140%;
    height: 12px;
    width: 12px;
    border-radius: 15px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    left: -11px;
    background-color: #FFF;
    padding: 12px 14px 12px 10px;
    content: "i";
    color: #a0d3e8;
}

div.message.error {
    background-color: #C3232D;
    color: #FFF;
}

div.message.error:before {
    padding: 11px 16px 14px 7px;
    color: #C3232D;
    content: "x";
}
div.message.hidden {
    height: 0;
}

ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.btn-inline{
  display : inline;
}

.vertical-middle{
  display: inline-block; /* インライン要素にすることで横に回り込む */
  vertical-align: middle; /* 上下中央に寄せる */ 
}

.block_wrapper {
  margin : 1rem;
}

@media screen and (max-width: 46.8125em) and (min-width: 0em){
  .block_wrapper {
    margin : 0rem;
  }

  .more_btn_r a {
      padding: 0em 1em;
      width: 200px;
      font-size: 16px;
      font-weight: 700;
  }
}

.image_message-content:not(.col-md-6) {
  margin : 1rem;
}

.hide {
  display: none;
}

/*==================================================================
	Header style # primary #30c8d6
===================================================================*/
.main-header .navbar-brand .icon {width: 180px;}
header.header {box-shadow: 0 0 12px rgba(17, 17, 17, 0.3); background: #FFFFFF; border-bottom: 1px solid #FF8B33;};

/* スマホサイズの場合はハンバーガーボタンを表示 */
@media (min-width: 768px) {
  #sideMenu .menu-content {
    display: block !important;
  }
  #menuButton {
    display: none;
  }
}

/* サイドメニューを隠すための初期設定 */
#sideMenu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.5);
  overflow-x: hidden;
  transition: 0.3s;
}

/* サイドメニューのスタイル */
#sideMenu .menu-content {
  position: absolute;
  top: 0;
  left: -250px; /* 初期状態では左に隠れている */
  width: 250px;
  height: 100%;
  background-color: #f8f9fa;
  padding: 20px;
  transition: 0.3s;
}

.lead { text-align: left; font-size: 1rem; }
.required { border: 1px solid #FF0000; font-size: 12px; color: #FF0000; padding: 2px 5px; margin-right: 4px; border-radius: 5px;}
.btn-disabled { --bs-btn-color: #DDD; --bs-btn-bg: #EEE; --bs-btn-border-color: DDD; }
/*==================================================================
	Main Content Style
===================================================================*/
.main-container .key-visual h1 {line-height: 1.6 ; color :#FF8B33; }
.main-container .key-visual h1 .key-visual-title {font-size: 130%; font-weight: 900; }
.main-container .key-visual .wellcom {margin: 50px 10px;}
.main-container .key-visual .wellcom a {border: 1px solid #FF8B33; padding: 10px; color: #FF8B33; border-radius: 5px;}
.main-container .brand{ background: #FF8B33; color: #FFF; padding: 50px; margin: 100px 0; }
.main-container .brand-list {  }
.main-container .brand-list .brand-box { margin-top: 50px; background: #FFFAF0; }
.main-container .brand-list .brand-box .brand-detail {}
.main-container .brand-list .brand-box .brand-detail .brand-header{ text-align: center; color: #FF8B33; }
.main-container .brand-list .brand-box .brand-detail .brand-header h3{ font-size: 180%; font-weight: 900;}
.main-container .brand-list .brand-box .brand-detail .brand-lead{ padding: 20px; }
.main-container .brand-list .brand-box .brand-picture .image-wrapper{ padding: 10px 0; }

.main-container .consideration {
    margin: 100px 0;
    color: #FFF;
    background-image: url(/img/PKU4151356PAR58383_TP_V.webp);
    background-size: cover;
    background-position: center;
    padding: 150px 0;
}

.main-container .consideration .consideration-wrapper { padding-left: 4.16%; }

.main-container .consideration .consideration-wrapper h2{ font-weight: bold; font-size: 1.8rem; }
.main-container .consideration .consideration-wrapper p{ font-size: 1.2rem; }
.main-container .consideration .consideration-wrapper .relative {padding: 16px}
.main-container .consideration .consideration-wrapper .background {opacity: .3;background: #000; width: 100%; height: 100%; position: absolute; border-radius: 10px;}
.main-container .consideration .consideration-wrapper a {border: 1px solid #FF8B33; padding: 10px; color: #FF8B33; border-radius: 5px; display: inline-block;}

.main-container .about-functions { padding: 50px 0; background-color: #FFFDF0; }
.main-container .about { margin-top: 100px; background-color: #FF8B33; color: #FFF; }
.main-container .about-inner { padding: 50px 0; text-center; }
.main-container .about .about-title{ font-weight: 900; }

@media (max-width: 768px)
{
  .main-container {
    text-align: center;
  }

  .main-container .brand-list .brand-box .brand-detail .brand-header  {
    padding-top: 16px;;
  }

  .main-container .consideration{
    padding: 50px 0;
  }

  .main-container .consideration .consideration-wrapper{
    padding: 0px;
    margin: 0px;
  }

  .main-container .consideration .consideration-wrapper .background{
    border-radius: 0px;
    left: 0;
  }
}

.section-content .list { width: 100%; display: flex; text-align: left; line-height: 2.2; font-size: 110%; border-bottom: 1px solid #DDD; padding: 10px;}
.section-content .list .list-head{ width: 20%; font-weight: 900; }
.section-content .list .list-text{ width: 80%; }

.section-content.privacy h4 { font-weight: 900; font-weight: 110%; }
.section-content.term h4 { font-weight: 900; font-weight: 110%; }
.section-content.term li {padding-top: 10px; }

.plan-table{}
.plan-table td, .plan-table th{ border: 1px solid #888;  }
.plan-table .label{ background-color: #FF8B33; color: #FFF; }
.plan-table td{ height: 35px; }
.plan-table tr > td{ padding-left: 10px; }
.plan-table .title{ width: 150px; }
.plan-table .title_empty{}
.plan-table .label{}
.plan-table.small-table {width: 90%;}
.plan-table.small-table tbody tr > td:first-child{ text-align: left; }
.plan-table.small-table tbody tr > td:second-child{ tex:t-align: left; }
.option-plan-table{}
.option-plan-table .label{ background-color: #FF8B33; color: #FFF; }
.option-plan-table td, .option-plan-table th{ border: 1px solid #888;  }


.feature-title {text-align:center;}
.feature-content {padding: 10px;}
.feature-content .feature-box {margin: 30px 0;}
.feature-content .feature-box:not(:first-child) {margin-top: 100px ;}
.feature-content .feature-box .feature-box_title { border-left: 4px solid #FF8B33; padding-left: 10px; }
.feature-content .feature-box .feature-box_content { margin-top: 20px;}

.icon-list li { margin-top: 10px }
.icon-list li img{display: inline-block; padding-right: 10px; }
.icon-list li p{padding-left: 40px; padding-top: 10px; }
/*==================================================================
	Footer style
===================================================================*/
footer {
    border-top: 1px solid #eee;
    clear: left;
    letter-spacing: .04em;
    font-family: "AvenirNext", "Lato", "Hirago KakuGothic ProN", Meiryo, sans-serif;
    background: #FFF;
}