@charset "utf-8";

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

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
}

html, body { min-width: 100%; min-height: 100%; box-sizing: border-box; line-height: 1.5; }

div, span, object, iframe, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}


/*基本の設定*/
@media print, screen and (min-width:769px){
.smp{ display:none !important;}
}

@media screen and (max-width: 768px){
.pc{ display:none !important;}

.right { text-align:left;}
img { max-width:  100%; height:auto;}
.full { width:100%; height:auto; }
}

table {
width: 100%;
table-layout: fixed;
word-break: break-all;
word-wrap: break-all;
}

#gmap,.youtube { margin: 0 auto;	position: relative;	width: 100%; padding-top: 56.25%; }
#gmap iframe,.youtube iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

.mt30 { margin-top: 30px; }

.footer_inner { display: flex; flex-wrap: wrap; }
    .f_logo { width: 20%; }
    .f_nav { width: 80%; }
    .f_nav ul { display: flex; flex-wrap: wrap; }
    .f_nav ul li { width : calc(100% / 4) ; }

/*その他の設定*/
@media screen and (max-width: 768px) {
	header img { width: 100%; }
	.header_out {
    border-bottom: 5px solid #DBDBDB;
    min-width: 100%;
	}
	.header_01_in {
    position: relative;
    width: 100%;
    margin: 0 auto;
    text-align: left;
    font-size: 67%;
    padding: 4px 0;
	}
	.header_02 {
    background-color: #FFDD66;
    height: 96px;
    min-width: 100%;
	}
	.header_02_in {
    width: 100%;
    margin: 0 auto;
    text-align: left;
    position: relative;
	}
	.header_03_in {
    width: 100%;
    margin: 0 auto;
    text-align: left;
	}
	.tel {
    position: static;
    right: 0px;
    top: 0px;
    z-index: 200;
	}
	.contents {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
		display: flex;
		flex-wrap: wrap;
	}
	
	.contents div,
	.contents h2,.contents p { display: block; min-width: 100%;}
	
	.contents_out_g {
    background-color: #F6F6F6;
    padding-top: 20px;
    min-width: 100%;
	}
	
	.main {
    min-width: 100%;
	}
	.main_in {
    width: 100%;
    margin: 0 auto;
	}
	.main_area {
		width: 100%;
		background-color: #fff;
		float: none;
		text-align: center;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		order: 1;
		padding: 3%;
	}
    
    .main_area img { max-width: 100%; }
    
	.left_area {
    width: 100%;
    margin-right: 0;
    float: none;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		order: 2;
	}
	.out_area {
    width: 100%;
    margin: 0 auto;
    position: relative;
	}
	
	#footer {
    background-color: #FFDD66;
    padding-bottom: 15px;
    min-width: 100%;
	}
	#footer p {
    text-align: center;
    font-size: 14px;
    margin: 0;
	}
	#footer .font20 {
		font-size: initial !important;
	}
	#footer .footer_top {
    background-color: #FFFFED;
    border-top: 5px solid #DBDBDB;
    padding-top: 20px;
    padding-bottom: 10px;
    margin-bottom: 15px;
    min-width: 100%;
    overflow: hidden;
	}
	#footer .footer_top li {
    font-size: 14px;
    margin-bottom: 0;
}
	#footer .footer_in {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
		display: flex;
		flex-wrap: wrap;
	}
	#footer .footer_in p { width: 100%; margin-bottom: 20px;}
    
    .footer_inner { display: flex; flex-wrap: wrap; }
    .f_logo { width: 100%; }
    .f_nav { width: 100%; padding: 3%; }
    .f_nav ul { display: flex; flex-wrap: wrap; }
    .f_nav ul li { width : calc(100% / 2) ; padding-bottom: 15px; }
    
	.f_area_01 {
    width : calc(100% / 1) ;
    float: none;
    margin-right: 0;
		padding: 0 2%;
	}
	
	.f_area_02 {
    width : calc(100% / 1) ;
    float: none;
    margin-right: 0;
		padding: 0 2%;
	}
	
	.f_area_01 li,.f_area_02 li { margin-bottom: 0; width : calc(100% / 3) ; padding: 2% 1%;}
	
	#footer .footer_top ul {
		margin: 0;
		text-align: left;
		display: flex;
		flex-wrap: wrap;
	}
	
	.side {
    background-color: #51B510;
    width: 100%;
    padding: 3px;
    margin-bottom: 10px;
    border-radius: 6px;
	}
	.side_top ul { display: flex; flex-wrap: wrap; padding: 2%; }
	.side_top ul li { width : calc(100% / 3) ; padding:1% 2%; }
	
	#side_out { position: initial!important; width: 100%; padding: 3%; margin-bottom: 0; }
	.side_top p , #side_out p { margin-bottom: 20px; }
	
	#side_out .side .side_in ul li a img { display: none; }
	#side_out .side .side_in ul li a { text-decoration: none; color: #000; font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 120%; }
	#side_out .side .side_in ul li a:before { content: "▶"; font-size: 10px; margin-right: 10px; color: #009900; line-height: 1.5;}
	#side_out .side .side_in ul li:nth-child(1) a:after { content: "お客様の喜びの声";  }
	#side_out .side .side_in ul li:nth-child(2) a:after { content: "お客様に選ばれる5つの理由とは？";  }
	#side_out .side .side_in ul li:nth-child(3) a:after { content: "バドガシュタイン温泉について";  }
	#side_out .side .side_in ul li:nth-child(4) a:after { content: "放射性ホルミシスとは？";  }
	#side_out .side .side_in ul li:nth-child(5) a:after { content: "ラジウム226とラジウム224の違いとは？";  }
	#side_out .side .side_in ul li:nth-child(6) a:after { content: "バドガシュタイン鉱石を購入して期待できること";  }
	#side_out .side .side_in ul li:nth-child(7) a:after { content: "今ご注文いただい方への4つの特典と1つの保証";  }
	#side_out .side .side_in ul li:nth-child(8) a:after { content: "Q&A";  }

	#side_out .side .side_in ul li a.nav_01,#side_out .side .side_in ul li a.nav_02 {
    padding: 15px;
    display: block;
    height: auto;
    width: 100%;
	}
	
	.fl_left { float: none; }
	.fl_right { float: none; }
	
	.box_02 { text-align: center; }
	.box_03 {
    width: 100%;
    margin: 0 auto;
    font-size: 14px;
    text-align: left;
	}
	.box_voice {
    width: 100%;
    margin: 0 auto;
    text-align: left;
    overflow: hidden;
    margin-bottom: 10px;
	}
	.btn_area {
		background-image: none;
		background-color: #FFFFC4;
		text-align: center;
		padding: 3%;
		font-size: 120%;
		width: 100%;
		font-weight: 900;
		margin-bottom: 20px;
	}
	.btn_area p:last-child { margin-bottom: 0; }
	
	.btn_area_02 {
    background-color: #F4F3F2;
    padding: 3%;
    border: 3px solid #CCC;
    border-radius: 10px;
    margin-bottom: 50px;
	}
	
	.h_voice {
    position: relative;
    bottom: initial;
    z-index: 200;
    margin-top: 0;
	}
	.voice_area {
		margin: 0 0 20px 0;
		padding: 20px;
		background-image: none;
		border: 5px solid #ffb600;
	}
	
	.kitai h3 { margin-bottom: 20px; }
	.mame {
		width: 100%;
		margin-bottom: 30px;
		background-size: 100% auto;
	}
	.mame_in {
		background: url("../../img/bg_mame.png"),url("../../img/bg_mame2.png");
		background-repeat: no-repeat ,repeat-x;
		background-size: 100% auto, 100% auto;
		padding-top: 50px;
    text-align: left;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 30px;
	}
	.mame_btm {    
    background-repeat: no-repeat;
		background-size: 100% auto;
		height: 4px;
	}
	
	.tokuten_area {
		background-repeat: repeat-y;
		background-size: 100% auto;
		background-position: center;
		text-align: left;
		margin-bottom: 60px;
	}
	
	.tokuten_icon {
    left: -10px;
    top: -50px;
    z-index: 100;
		transform: rotate( 5deg );
	}
	.tokuten_ttl {
		margin-top: 50px;
		padding: 3%;
		height: auto;
		background-size: 100% 100%;
	}
	.tokuten {  
    background-repeat: no-repeat;
		background-size: 100% auto;
    background-position: top center;
    padding: 28px;
    overflow: hidden;
	}
	.tokuten_btm {
    background-size: 100% auto;
    background-repeat: no-repeat;
		background-position: center;
    height: 2px;
	}
	.payment_title { display: block; width: 100%; text-align: left;}
	.payment_title:before { content: "ご注文方法"; font-weight: 900; font-size: 160%; letter-spacing: 0; font-family: 'Noto Sans JP', sans-serif; border-left: solid 10px #ff3300; padding:5px 10px; border-bottom: solid 1px #ccc; display: block; width: 100%; }
	.payment_title img { display: none; }
	.daihyo_pic { display: flex!important; flex-wrap: wrap; justify-content: center; }
	
	.side_flex01 { display: flex!important; flex-wrap: wrap; justify-content: center; align-items: center; }
	.daihyo_pic div,.side_flex01 div { padding: 3%; min-width : calc(100% / 3) ; }
	
	.contents_out {
    padding-top: 20px;
    min-width: 100%;
		width: 100%;
	}
	
	.conts_01 { width: 100%; }
	.conts_01 img { width: 100%;}
	
	.table_01,.table_02 { border-top: 1px solid #656464;
		border-right: 1px solid #656464;
		border-bottom:  0;
	border-left: 0; }
	.table_01 th,.table_01 td,.table_02 th,.table_02 td {
		width: 100%;
		display: block;
		border-collapse: collapse;
		border-right: 0;
		border-top: 0;
		border-left: 1px solid #656464;
		border-bottom: 1px solid #656464;
		text-align: left;
		padding: 3%;
	}
	.ttl_01 {
		background-image: url("../images/bg_ttl_01.png");
		background-repeat: repeat-x;
		background-size: auto 100%;
		box-sizing: border-box;
		height: auto;
		text-align: left;
		padding: 3%;
		margin-bottom: 15px;
		width: 100%;
		border: solid 1px #ccc;
	}
	
	.ttl_01 h1 {
    font-size: 140%;
		font-weight: 900;
		font-family: 'Noto Sans JP', sans-serif;
	}
	.box_01 {
		width: 100%;
		text-align: left;
		margin-bottom: 10px;
		overflow: hidden;
		}
	
	#go_confirm_button { width: 100%; margin-bottom: 20px; }
	
}

/* ページトップへ戻る */
#page-top {
    position: fixed;
    bottom: 0;
    right:0;
    font-size: 90%;
	z-index:999;
	margin: 0!important;
}
#page-top a {
    background: #f6ab31;
    text-decoration: none;
    color: #fff;
    width: 45px;
	height: 45px;
    display: flex;
	justify-content: center;
	align-items: center;
}

@media screen and (min-width:1201px){
	#page-top a:hover { text-decoration: none; background: #ccc; }	
}

@media screen and (max-width: 600px){
	#side_out .side .side_in ul li a { text-decoration: none; color: #000; font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 90%; }
	.side_top ul li { width : calc(100% / 2) ; padding:1% 2%; }
.mame_btm {    
    background-repeat: no-repeat;
		background-size: 100% auto;
		height: 2px;
	}
}

.formzu_box { height:800px; }

.douga_box { width:750px; height:435px; background:url(https://kansokudetox.com/io/st07-004.jpg) no-repeat; }
.douga_box_inner { padding:90px 0px 0px 20px; }
.douga_box_inner iframe { margin-left: -305px;}

.horumisisu_box { width:710px; background-color:#E6E6E6; border-radius: 10px; }


@media screen and (max-width: 600px){
    .formzu_box { height:1000px; }
    .douga_box { width:100%; height:auto; background: none; }
    .douga_box_inner { padding:20px; }
    .douga_box:before { content:"玉川温泉最高放射線量"; display: block; color: #fd6706; font-family: 'Shippori Mincho', serif; font-weight: 700; font-size: 160%; margin-bottom: 10px; margin-top: 40px; }
    .douga_box:after { content: url("../../img/st07-004_smp.jpg"); display: block; width: 293px; height: 331px; margin: 20px auto;}
    .douga_box_inner iframe { margin-left:initial;}
    .youtube2 { margin: 0 auto;	position: relative;	width: 100%; padding-top: 56.25%; }
    .youtube2 iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
    .horumisisu_box { width:100%; background-color:#E6E6E6; padding: 10px; }
}