@charset "UTF-8";
/* CSS Document */
/*--トップページ背景画像Retinaディスプレイ対応--*/
@media only screen and (-webkit-min-device-pixel-ratio: 2) {

#top_V{
	max-width : 100%;
	background: url(../img/top_image@2x.png) no-repeat right top;
	min-height: 200px;
	}
}
/*===============================================
●smart.css  画面の横幅が640pxまで
===============================================*/
@media screen and (max-width:640px){
nav #navi{ display: none }
.tinynav { display: block ; }
.wrap {
width:100%;
overflow:hidden;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

img{
max-width: 100%;
height: auto;
width /***/:auto;
}
.box_header_navi{display: none; }
.main_V{display: none; }
#top_V{
	max-width : 100%;
	background: url(../img/top_image.png) no-repeat right top;
	background-size: 320px 174px;
	height: 200px;
	}
input[type="text"],
textarea {
    width: 100%;
}
.entryForm th{
	text-align: left;
}

#top_V p{display: none; }
#navi { display: none ; }
#right_column { display: none ; }
#sitemap { display: none ; }
#side { display: none ; }
#info br { display : none ; }
#main{
	width: 90%;
	margin-right: 5%;
	margin-left: 5%;
}
#left_column{
	margin: 0px 0px 0px 20%;
	}

#main p{
	margin-bottom: 10%;
}

/*～以下、画面の横幅が640pxまでの場合のスタイル記入～*/
/*-----------------設定共通--------------------*/
header {
	background:#b99e82;
}
#logo {
	width: 100%;
}

footer {
	clear: both;
	color: #fff;
	background: #a77f5a;
	font-size: 75%;
	float: none;
	padding: 10px 5px;
}

#pageTop {
  position: fixed;
  bottom: 40px;
  right: 0px;
}
 
#pageTop a {
	display: block;
	z-index: 999;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	width: 30px;
	height: 70px;
	background-color: #a77f5a;
	color: #fff;
	text-align: center;
	opacity: 0.7;
	font-size: 87.5%;
	padding-top: 10px;
}
 
#pageTop a:hover {
  opacity: 1;
}

/*--ナビゲーションバー--*/
select.tinynav {
   font-size: 1em;          /* 文字の大きさ */
   width: 100%;               /* 横幅 */
   background-color: #fff; /* 背景色 */
   border: 1px solid #ccc; /* 枠線 */
}
select.tinynav option[selected] {
   background-color: #e6dcd1; /* 選択中項目の背景色 */
   color: #a77f5a;              /* 選択中項目の文字色 */
}
/*--下層ページ共通--*/
#sub_V{display: none ; }
/*#sub_V{
	max-width : 100%;
	background: url(../img/top_image.png) no-repeat right top;
	background-size: 320px 174px;
	min-height: 200px;
	}*/
#sub_V h1{display: none ; }
/*.bandTitle{display: none ; }*/
	
/*#sub_V h1{
	color: #754c24;
	padding-top: 120px;
	padding-left: 30px;
	font-size: 131%;
	}*/
.bandTitle{
	background: linear-gradient(90deg, #f6cef5 0%,#fff 100%);
	display: block;
	padding: 4px 0 4px 1em;
	font-size: 87.5%;
	color: #40220f;
	margin-bottom: 30px;
	/*word-wrap: break-word;*/
}
.bandTitle a{
	color: #40220f;
	text-decoration: underline;
}
.bandHome a{
	background: url(../img/ico_home.png) no-repeat left center;
	padding: 0 0 0 22px;
}
.supple_h2_img{text-align: center;}
.supple_h3_img{text-align: center;}
.supple_h3_img_l{
	text-align: center;
	}
.smokers_h2_img{
	text-align: center;
	display: block;
	}
.smokers_h3_img{
	text-align: center;
	display: block;
}
.reason_h3_img{padding: 0 0 0 10px;}
.reason_h3{
	font-size: 87.5%;
	margin-bottom: 10%;
	padding: 5%;
}
.base_g6{
	background: #eee;
	border-radius: 3px;
}
.indent{
	padding-left: 1em;
}

.center{
	text-align: center;
}

#warnings figure{
	text-align: center;
}

#warnings figcaption{
	margin-bottom: 7%;
}
.warnings_btn a{
	padding: 3px;
	margin-top: 30px;
	text-align: center;
	background: #f6cef5;
}

/*----インデックスページ----*/
#main .ul_index{
	margin-bottom: 60px;
}


	#main .ul_index li a{
	background: #fff url(../img/bt_ss.png) no-repeat 1em;
	display: block;
	padding-bottom: 6px;
	color: #40220f;
	padding-left: 2em;
	font-size: 112.5%;
	text-decoration: underline;
	}
#main .ul_index li a:hover{
	text-decoration: none;
	color: a77f5a;
	}
div{
	width: 100%;
	word-wrap: break-word;
}

#quit h3{
	font-size: 112.5%;
	padding: 0px 0px 0px 20px;
	background: none;
	margin-bottom: 1em;
	border-style: none;
	}

#quit h4 {
	position: relative;
	padding: 0.2em 1em;
	background-color: #f2e4f2;
	color: #666;
	border-right: thin dotted #CCC;
	border-top-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#quit h4::before,
#quit h4::after {
	content: '';
	position: absolute;
	top: 100%;
	border-style: solid;
	border-color: transparent;
}
#quit h4::before {
	left: 0;
	border-width: 0 15px 15px 0;
	border-right-color: #ccc;
}

.ribbon{
	margin-left: 5%;
	padding-left: 5%;
	width: 90%;
	padding-right: 5%;
	border-left: thin dotted #CCC;
	border-bottom: thin dotted #CCC;
	margin-bottom: 5%;
}
.topnon{
	margin-top: -20px;
	padding-top: 20px;
}

h5 {
	width: 180px;
	height: 40px;
	line-height: 40px;
	position: relative;
	background: #f0f0f0; /* 付箋の色 */
	border-left: 6px solid #f6cef5;
	color: #666;
	padding-left: 20px;
	font-size: 110%;
}

h5:after {
width: 170px;
height: 35px;
content: "";
position: absolute;
top: 0;
right: 2px;
    /* ぼかし */
box-shadow: 0 5px 2px #999;
    /* 回転 */
transform: rotate(3deg);
z-index: -1;
}
#quit .nomal_h3 {
	font-size: 112.5%;
	padding: 2px 0px 2px 20px;
	background: linear-gradient(90deg, #fff 0%,#a77f5a 100%);
	border-bottom: 4px solid #f6cef5;
	border-radius: 3px 3px 0px 0px;
	margin-bottom: 1em;
}
.kinen{
	border: 1px solid #999;
	margin: 0px 1em 5px 0px;
}

.kinen li{
	list-style: decimal inside;
	border: 1px solid #999;
	padding: 20px;
}

.kinen li ul li{
	/*display: inline;*/
	border-style: none;
	list-style: none inside;
}

.kinen2{
	margin: 0px 1em 5px 0px;
}
.kinen2 li{
	list-style: decimal inside;
	line-height: 2;
}

.comment{
	font-size: 87.5%;
	color: #666;
	padding-top: 20px;
	padding-bottom: 10px;
	line-height: 1.6;
}
.kakomi{
	margin-left: 5%;
	padding-left: 5%;
	width: 90%;
	padding-right: 5%;
	border: thin dotted #CCC;
	margin-bottom: 5%;
	font-size: 87.5%;
	text-align: left;
	}
.icon_yajirushi:before {
	content: url(../img/bt_ss.png);
	position : relative ;
	bottom : -0.16em ;
	margin-right : 0.1em ;
	}
.profile_l{
	text-align: center;
	margin-bottom: 1em;
}
.maru2{
	position:relative;
	padding-left:30px;
}
.maru2:before{
	content:''; 
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px; 
	height:12px; 
	width:12px; 
	display:block; 
	position:absolute; 
	top:14px; 
	left:7px; 
	background-color:#6699ff;
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
	filter:alpha(opacity=50);
	-moz-opacity:0.50;
	-khtml-opacity: 0.50;
	opacity:0.50;
	z-index: 1;
}
 
.maru2:after{
	content:''; 
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px; 
	height:15px; 
	width:15px; 
	display:block; 
	position:absolute; 
	top:7px; 
	left:2px; 
	background-color:#cc66ff;
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset
}

}