@charset "utf-8";
/*-----------------------------
 reset
-------------------------------*/
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, 
img, small, strong, sub, sup,b, i,dl, dt, dd, ol, ul, li,
 form, label,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,hgroup, menu, nav, section,
time, mark, audio, video {
margin:0;	padding:0;border:0;outline:0;font-size:100%;
vertical-align:baseline;background:transparent;line-height:1.7;
}
th{font-style:normal;font-weight:normal;}
ul li{list-style:none; }
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%;}

body {line-height:1;font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ","ＭＳ Ｐゴシック",Helvetica,Sans-Serif;}
nav ul {list-style:none;}
table {	border-collapse:collapse;border-spacing:0;}
input, select {vertical-align:middle;}
article, aside, figure, footer, header,hgroup, nav, section { display:block; }
img{vertical-align:bottom;width:100%;display: block;}


/* 画面全体の大きさ wrapper -> warp */

.warp{
max-width:750px;
margin: 0 auto;
background:#fff;
}

/* 画像の大きさ基本設定 Image box -> img-b */
.img-b {
  width: 100%;
  display: block;
}

.offer01{
	max-width: 100%;
    height: auto;
    display: block;
    border-style: none;
}




.slide_wrap{
	background: #F0F0EB;
}

.overlaid{
		position: relative;
}

.slide_bg_02{
	position: absolute;
	top:0;
}

#slick02{
	padding: 350px 0 0;
	z-index: 3;
}

#overlaid-box{
	position: relative;
}


.graph1{
	z-index: 10;
	position: relative;
}

.graph2{
	z-index: 20;
	top: -40px;
	position: absolute;
}

/* ---------- アコーディオン効果 accordion -> acc ---------- */
.acc-check {
  display: none;
}
.acc-label {
  display: block;
}
.acc-content {
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}
.acc-check:checked + .acc-label + .acc-content {
  max-height: 5000px;
  transition: all 1s ease-in;
}

/* ---------- タブ切り替えのスタイル tab structure -> tabs ---------- */
/* タブの見出し (3段タブの設定) */
.tabs-head {
  width: calc(100% / 3);
  display: block;
  float: left;
}
/* ラジオボタンを隠して見出しの画像表示 */
input[name="tabs_input"] {
  display: none;
}
/* タブ見出しの画像、表示と非表示 */
.tab-on {
  display: none;
}
.tab-off {
  display: block;
  width: 100%;
}
/* タブ切り替えの中身 */
.tabs-content {
  position: relative;
  display: none;
  clear: both;
  overflow: hidden;
}
.tabs-content-form {
  position: absolute;
  width: 92%;
  margin: 0 auto;
  top: 33%;
  left: 0;
  right: 0;
}
/* 選択した時のタブ見出しの表示 */
input:checked + .tabs-head > .tab-on {
  display: block;
  width: 100%;
}
input:checked + .tabs-head > .tab-off {
  display: none;
}
/* 選択した時のタブのコンテンツの表示 (前半) */
#tabs1:checked ~ #tabs1-content,
#tabs2:checked ~ #tabs2-content,
#tabs3:checked ~ #tabs3-content {
  display: block;
}
/* ラジオボタンを隠して見出しの画像表示 (後半) */
input[name="tabs_input2"] {
  display: none;
}
/* 選択した時のタブのコンテンツ表示 (後半) */
#tabs4:checked ~ #tabs4-content,
#tabs5:checked ~ #tabs5-content,
#tabs6:checked ~ #tabs6-content {
  display: block;
}

/* ---------- フッター ---------- */
.footer-text {
  text-align: center;
  font-size: 0.9rem;
}
a:-webkit-any-link {
  color: -webkit-link;
  cursor: pointer;
  text-decoration: underline;
}
/* 画面サイズが 750px まではここを読み込む */
@media screen and (max-width: 750px){
	
body{
    overflow-x: hidden;
}

	
	image{
	max-width:100%;
	}
	
	img{
		max-width: 100%;
	}
	
	.offer01{
		max-width: 100%; 

	}
	
	.graph1{
	z-index: 10;
	position: relative;
}

.graph2{
	z-index: 20;
	top: -15px;
	position: absolute;
}
	
	p{
	 max-width: 100%;
	}
	
	.footer p{
		font-size: 1.92vw;
	}
	.verisign{
		width: 13.466vw;
		height: 9.46vw;
	}
	.mlritz{
		width: 17.33vw;
		height: 6.266vw;
	}
	.slick-dots li button:before{
		font-size: 6vw;
	}
	.slick-prev, .slick-next {
		width:12.2vw; 
		height:12.2vw; 
	}
	.slideArea01{
		padding: 58vw 0 6vw;
	}
	#slick02{
		padding: 72.8vw  0 0;
		z-index: 3;
	}
	#slick03{
		padding: 0 0 11.47vw;
		z-index: 3;
	}
	#slick04 {
	}
	#slick05{
		padding: 0vw  0 0;
		z-index: 3;
	}
	.slick-dots li{
		width: 2.7vw;
		height: 2.7vw;
	}
	.pop01:hover{
		opacity: 1;
	}
	.iziModal .iziModal-wrap {
		width: 90%;
	}
}/*SP end*/

.toggle {
    position: relative;
    overflow: hidden;
}

.wrap{
max-width: 100%;
margin: 0 auto;
background:#fff;
}
.abs{
	position: absolute;
}
.btn{
	position: absolute
}
.btn01{
	top: 32.6%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 92.3%;
}
.btn02{
	top: 34%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 92.3%;
}
.btn03{
	top: 60.9%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 92.3%;
}

/*************************
Tab
*************************/
.Tab{
background: url(../cpc_06/bg.jpg);
background-position: top;
}
.Tab__Text{
	width: 100%;
}
.TabBtn{
	display: flex;
	margin: 0 auto;
	width: 100%;
}
.TabWrap{
margin: -1px auto 0;
position: relative
}
.TabWrap--01,.TabWrap--03,.TabWrap--04{display: none}
.TabBtn01,.TabBtn02,.ToggleBtnWrap,.TabBtn05{
	top: 35%;
    left: 0;
    right: 0;
    margin: auto;
    width: 92%;
}
.ToggleBtnWrap{
	top: auto;
	bottom: 3.7%;
}
.TabBtn05{top: 41.7%;}
.BtnToggle{
	cursor: pointer;
	position: absolute;
	width: 7%;
    height: 3%;
}
.BtnToggle__Inner{position: relative}
.BtnToggle--01{
	top: 21.4%;
    right: 9.1%;
}
.BtnToggle--02{
	bottom: 15.8%;
    right: 8.9%;
}
.BtnToggle__Btn--01{opacity: 0	}
.BtnToggle--On .BtnToggle__Btn--01{ opacity: 1}
.TabBtn03--01{
	width: 95%;
    top: 23.9%;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.TabBtn03--02{
	width: 96%;
    left: 0;
    right: 0;
    margin: 0 auto;
    position: absolute;
    bottom: 3.4%;
}
.TabBtn__Item{cursor: pointer}
.TabBtn02{
	top: 31%;
}
.TabWrap2{
    margin: -1px auto 0;
	position: relative;
}
.TabBtn2{
    display: flex;
    margin: 0 auto;
    width: 100%;
}
.TabBtn03{
	top: 31%;
}
.TabWrap3{
    margin: -1px auto 0;
	position: relative;
}
.TabBtn3{
    display: flex;
    margin: 0 auto;
    width: 100%;
}