/* ====== 共通 ====== */
*, *:before, *:after { 
	box-sizing: border-box; 
}
html, body { 
	min-height: 100vh;
}
body {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
	letter-spacing: 0.05em;
	text-align: center;
	background-color: #fcf9f1;
	> footer {
		position: sticky;
		top: 100vh;
		padding-top:2rem;
		padding-bottom: 1rem;
	}
}

main {
    width:100%;
	margin: 0;
}
img {
	image-rendering: -webkit-optimize-contrast;
    backface-visibility:hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

.bg-warning {
	background-color: #f08a12!important;
}
.btn-warning {
	background-color: #f08a12!important;
	color: #fff!important;
}
.btn-outline-warning {
	border-color: #f08a12!important;
	color: #f08a12!important;
}

.bg-l-blue{
	background-color: #bfddf7;
}

.bg-sky {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  background-image: url(../img/bg-sky.png);
}

.bg-riyou {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  background-image: url(../img/bg-riyou.png);
}

h1,.h1,h2,.h2,h3,.h3 {
	font-weight: bold;
	line-height: 2em;
}
h5,.h5 {
	line-height: 1.8em;
}

h2.midasi-blue {
  position: relative;
  display: inline-block;
  background: #b0dcfa; /*背景色*/
  padding: 0.5em 1em;/*文字周りの余白*/
  /*color: white;文字を白に*/
  border-radius: 0.3em;/*角の丸み*/
	font-size: 20px;
	margin-bottom: 2em;
}

.midasi {
  position: relative;
  display: inline-block;
  padding: 0 45px;
}
.midasi:before, .midasi:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 44px;
  height: 2px;
  background-color: black;
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}
.midasi:before {
  left:0;
}
.midasi:after {
  right: 0;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

p {
	font-size: 16px;
}

a {
	color: #0a58ca;
	text-decoration: none;
}
a:hover {
    text-decoration: none;
	opacity: 0.8;
}

a img:hover {
    transform: scale(1.05);
    transition: 0.4s;
}

/* 
キーワード横並びの設定 
---------------------------------------------- */

.keyword-box {
	display: flex;
	justify-content: center;
}

.keyword {
	width: auto;
	text-align: center;
	padding: 8px 12px;
	background-color: #fff;
	color: #f08a12;
	margin-left: 1%;
}
.keyword a {
    text-decoration: none;
    color:#f08a12;
	font-weight: bold;
}
.keyword:hover {
	background-color:#f08a12;
	color: #fff;
}
.keyword a:hover {
	color: #fff;
}


.keyword-02 {
	width: auto;
	text-align: center;
	padding: 8px 12px;
	background-color: #f08a12;
	color: #fff;
	margin-left: 1%;
}


/* 
ご利用イメージフロー 
---------------------------------------------- */

.flow04 {
  padding-left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px;
}

.flow04 > li {
  list-style-type: none;
  width: 100%;
  max-width: 200px;
  display: flex;
}

.flow04 > li .icon04 {
  line-height: 2;
  width: 2em;
  height: 2em;
  text-align: center;
  color: #fff;
  background: #E26B5D;
  margin: 0 auto 10px;
  display: block;
  border-radius: 100vh;
  position: relative;
}

.flow04 > li .icon04::before {
  content: "";
  border: solid transparent;
  border-width: 7px;
  border-top-color: #E26B5D;
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.flow04 > li dl {
  padding: 30px 20px;
  margin: 0;
  border: 3px solid #E26B5D;
  position: relative;
}

.flow04 > li:not(:first-child) dl::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-right: 10px;
  display: inline-block;
  border-top: 4px solid #E26B5D;
  border-right: 4px solid #E26B5D;
  position: absolute;
  top: calc(50% - 14px);
  left: -45px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.flow04 > li dl dt {
  font-size: 1.3em;
  font-weight: 600;
  color: #E26B5D;
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
  margin-bottom: 10px;
  text-align: center;
}

.flow04 > li dl dd {
  margin-left: 0;
}

@media(max-width: 767px){
  .flow04 {
    gap: 20px;
  }
  .flow04 > li {
    max-width: unset;
    display: block;
  }
  .flow04 > li:not(:first-child) dl::before {
    display: none;
  }
}


/* 
ご注文・お問い合わせフォーム
---------------------------------------------- */
input::placeholder {
    opacity: 0.5!important;
	color: #777!important;
	font-weight: 300!important;
}

.form-group {
	margin:1.5rem auto;
}
label {
	margin-bottom: 1rem;
	font-weight: bold!important;
}


label.form-check-label {
	margin-bottom: 0;
	font-weight: 300!important;
}


/* 
特定商取引に関する法律に基づく表示
---------------------------------------------- */
table tr th {
	font-weight: 500;
	font-size:0.8rem;
}
table tr td {
	font-size:0.8rem;
}




/* 
フッター
---------------------------------------------- */
.nav-link {
	color:#f08a12;
	font-weight: bold;
}

.nav-link02 {
	color:#333;
	font-size: 13px;
	font-weight: 300;
}
.nav-link02 a:hover {
	color:#000;
}

/* =============================================
メディアクエリ
============================================= */

/* 大デバイス（デスクトップ, 1200px 未満）
==============================================*/
@media screen and (max-width: 1199.98px) {

.bg-riyou {
	background:none;
	}
}
/* END */
/* 中デバイス（タブレット, 992px 未満）
==============================================*/
@media screen and (max-width: 991.98px) {
    .container {
      max-width: 740px;
    }
}
/* END */
/* 小デバイス（横向きモバイル, 768px 未満）
==============================================*/
@media screen and (max-width: 767.98px) {
	

.bg-sky {
  background-size: cover;
}
h1,.h1,h2,.h2,h3,.h3 {
	line-height: 1.4em;
}
h5,.h5 {
	line-height: 1.3em;
}

}

/* END */
/* 極小デバイス（縦向きモバイル, 576px 未満）
==============================================*/
@media screen and (max-width: 575.98px) {
	.offcanvas {
		width:80%;
	}
	#aisatu h3 {font-size:1.4em;}
	
    h3,.h3 {
        font-size:1.6em;
        line-height: 1.6em;
    }
	
	h5,.h5 {font-size: 1em;}
	
}

/* END */