@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

/*** all ***/

*:focus {
  outline:none;
}
html{
  font-size: 16px;
}
body{
  -webkit-text-size-adjust: 100%;
	line-height: 1.5;
  letter-spacing: 0;
}
body, .font_sans-serif{
	font-family: 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}

h2, h3, h4, h5, h6{
  line-height: 1.5;
}

input[type="submit"], input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration, input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus, input[type="button"]::focus {
  outline-offset: -2px;
}
textarea{
  overflow: auto
}

/*---------------------------------------------------------------------------*/

#wrap{
  max-width: 562.5px;
  margin: 0 auto;
  overflow: hidden;
}

.img3 .btn_wrap{
  left: 0;
  bottom: 4%;
}

.cta .btn_wrap{
  left: 0;
  bottom: 3.5%;
}

/*----特商　追加-----------------------------------------*/
.modal-text{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	background: #FFF3DC;
}
/*
.modal-text .span1{
	padding-right: 10px;
	margin-right: 10px;
	border-right: 1px solid #222;
}
*/
.modal-container{
	padding: 20px 40px 40px;
}

.modal-span {
cursor: pointer;
}
.modal-outer {
position: fixed;
top: 0;
left: 0;
display: none; 
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 10000; 
}


.modal-inner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 30px auto 0;
overflow-y: auto;
width: 90%;
max-width: 500px;
background: #fff;
}
.show {
display: block; 
}
.modal-inner-header {
margin-bottom: 25px;
}
.close-btn-top {
cursor: pointer;
color: #000;
font-size: 2em;
position: absolute;
top: -10px;
right: 5px;
}
.close-btn-bottom {
margin-bottom: 0;
width:150px;
margin:0 auto;
text-align: center; 
}
.close-btn-bottom button {
padding: 5px 10px; 
cursor: pointer;
}
.bold {
  font-weight: bold; 
}

/*モーダル内のコンテンツの指定*/
.table{
   width: 100%;
}
.box:not(:first-child) {
	padding-top: 20px;
}
.box{
	display: flex;
	justify-content: space-between;
}

p.name {
	width: 30%;
	font-weight: 600;
	vertical-align:top;
}

p.text{
	width: 80%;
	padding-left: 20px;
	vertical-align:top;
}
/*ここからタブレット用（780px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 768px){
	p.name {
	width: 100%;
	}

	p.text{
		width: 100%;
		padding-left: 0;
	}
	
	.box{
		display:block; 
	}
	
	.modal-container{
	    padding: 20px;
    }
}

/*ここからスマホ用（750px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 667px){
	p.name {
	width: 100%;
	}

	p.text{
		width: 100%;
		padding-left: 0;
	}
	
	.box{
		display:block; 
	}
	
	.modal-container{
	    padding: 20px;
    }
}