@charset "utf-8";
/*-----------------------------	
	共通
-----------------------------*/
#tano-main-area h2.tano-h2-type-01{
	margin:30px 0 10px 0;
	padding:15px 20px 12px;;
	font-size: 24px;
	color: #000;
	border: solid 2px #202020;
	background: #3cc59b;
	line-height: 1em;
	display: flex;
	align-content: center;
}
#tano-main-area h3.tano-h3-type-01{
	background: none;
	margin:35px 0 8px;
	border-bottom:solid 2px #202020;
}
#tano-main-area h3.tano-h3-type-01 span{
	display: block;
	color: #000;
	font-size: 20px;
	font-weight: bold;
	padding:5px 20px;
	position: relative;
}
#tano-main-area h3.tano-h3-type-01 span:before{
	content: "";
	width: 10px;
	height:31px;
	border:solid 2px #202020;
	background: #3cc59b;
	position: absolute;
	top: 0;
	left: 0;
}
#tano-main-area .tano-jin-text-01{
	font-size: 14px;
	color: #444;
	padding: 0;
	margin: 0;
}
#tano-main-area .guarantee-text-gray{
	line-height: 1.75em;
	background: #f5f5f5;
	padding: 10px;
	margin: 30px 0;
}
#tano-main-area #section01 .guarantee-text-gray{
	font-size: 12px;
}
#tano-main-area #section02 .guarantee-text-gray{
	font-size: 14px;
}
#tano-main-area .text-gray-inner{
	margin-top:5px;
}
#tano-main-area .guarantee-text-white{
	font-size: 14px;
	background: #fff;
	padding: 5px 10px;
	display: block;
}
#tano-main-area .text-red{
	font-size: 14px;
	line-height: 1.75em;
	background: #ffdada;
	padding: 5px 10px;
	margin: 15px 0 30px;
}
#tano-main-area section a{
	text-decoration: underline;
}
#tano-main-area section a:hover{
	text-decoration: none;
}
#tano-main-area section .images{
	display:flex;
	justify-content:space-between;
	margin-top:25px;
}
/*-----------------------------	
	#page-top
-----------------------------*/
#tano-main-area #page-top .model{
	margin: 35px 0;
	border:solid 2px #3cc59b;
}
#tano-main-area #page-top .model p{
	line-height: 1.75;
}
#tano-main-area #page-top .model-top{
	display: block;
	position: relative;
}
#tano-main-area #page-top .model-top:before{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  width: 0;
	height: 0;
	border-style: solid;
	border-width: 17px 8.5px 0 8.5px;
	border-color: #3cc59b transparent transparent transparent;
}
#tano-main-area #page-top .model-top p{
	text-align: center;
	background: #3cc59b;
	display: block;
	margin: 0;
	padding: 0;
}
#tano-main-area #page-top .model-top p span{
	font-size: 24px;
	font-weight: bold;
	color: #000;
}
#tano-main-area #page-top .model-bottom{
	display: flex;
	flex-wrap: nowrap;
	align-content: center;
	padding:10px 20px;
	background: url(dot.png) repeat;
}
#tano-main-area #page-top .model-bottom .left{
	margin-right: 20px;
}
#tano-main-area #page-top .model-bottom .right{
	font-size: 18px;
	color: #000;
	text-align: left;
	display: flex;
	justify-content: center;
	align-items: center;
}
#tano-main-area #page-top .model-bottom .right p{
	margin:0;
	display: inline-block;
}
#tano-main-area #page-top .model-bottom .right span{
	font-size: 20px;
	font-weight: bold;
	display: inline-block;
	border-bottom: solid 4px #fefb2d;
	line-height: 0.5em;
}
/*-----------------------------	
	ボタン
-----------------------------*/
#tano-main-area #page-top nav ul{
	display: flex;
	justify-content: space-between;
	padding-left: 8px;
}
#tano-main-area #page-top nav ul li{
	width: 219px;
	display: block;
	padding: 8px 0;
}
#tano-main-area #section04 .link [class^=box] .bottom{
	padding: 0 12px 10px;
}
#tano-main-area #section04 .link [class^=box] .button{
  width: 397px;
	height: 68px;
  display: block;
  padding: 8px 0;
	text-align: center;
	font-size: 16px;
	margin: 0 0 0 5px;
}
*,
*:before,
*:after{
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}
#tano-main-area #page-top,
#tano-main-area section{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
}
#tano-main-area .btn,
#tano-main-area a.btn,
#tano-main-area button.btn {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  color: #000;
  border-radius: 2rem;
}
#tano-main-area #page-top nav ul li .btn,
#tano-main-area #page-top nav ul li a.btn,
#tano-main-area #page-top nav ul li button.btn {
	width: 219px;
}
#tano-main-area #section04 .link [class^=box] .button .btn,
#tano-main-area #section04 .link [class^=box] .button a.btn,
#tano-main-area #section04 .link [class^=box] .button button.btn {
  width: 397px;
}
#tano-main-area a.btn-border-shadow {
  padding: calc(2rem - 12px) 0 2rem;
  background: #fff;
}

#tano-main-area a.btn-border-shadow:before {
  position: absolute;
  top: -6px;
  left: -6px;
  height: 100%;
  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 2px solid #202020;
  border-radius: 2rem;
}
#tano-main-area #page-top nav ul li a.btn-border-shadow:before {
	width: 219px;
}
#tano-main-area #section04 .link [class^=box] .button a.btn-border-shadow:before {
	width: 397px;
}

#tano-main-area a.btn-border-shadow:hover {
  padding: calc(2rem - 6px) 0;
}

#tano-main-area a.btn-border-shadow:hover:before {
  top: 0;
  left: 0;
}

#tano-main-area a.btn-border-shadow--color {
  border-radius: 0;
  background: yellow;
}

#tano-main-area a.btn-border-shadow--color:before {
  border-radius: 0;
}

/*-----------------------------	
	#section01
-----------------------------*/
#tano-main-area .section01-point{
	border:solid 2px #202020;
	background: #fefb2d;
	padding: 8px;
}
#tano-main-area .section01-point .title{
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	background: #000;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}
#tano-main-area .section01-point .title span{
	display: block;
	line-height: 1em;
	padding-top:3px;
}
#tano-main-area .section01-point .text{
	color: #000;
	font-size: 14px;
	line-height: 1.75em;
}
#tano-main-area .section01-point .text span{
	font-size: 20px;
	font-weight: bold;
	display: block;
	padding: 10px 0 5px;
}
#tano-main-area .section01-lineup-box{
	margin-top:25px;
}
#tano-main-area .section01-lineup-01,
#tano-main-area .section01-lineup-02{
	float:left;
	width:48.7%;
}
#tano-main-area .section01-lineup-01{
	margin-right:2%;
}
#tano-main-area .section01-lineup-box .tano-item-detail-box-1 .tano-item-detail .tano-item-detail-left{
	width:200px;
	float:left;
}
#tano-main-area .section01-lineup-box .tano-item-detail-box-1 .tano-item-detail .tano-item-detail-left a img{
	width:200px;
	height:200px;
}
#tano-main-area .section01-lineup-box .tano-item-detail-box-1 .tano-item-detail .tano-item-detail-right{
	width:227px;
	float:right;
}
#tano-main-area .section01-lineup-box .tano-item-detail-box-1 .tano-item-detail .tano-item-price-area{
	width:100%;
}
#tano-main-area .section01-lineup-box .tano-item-detail-box-1 .tano-item-detail-box-inner{
	border:2px solid #202020;
	margin:0;
}

/*-----------------------------	
	#section03
-----------------------------*/
#tano-main-area #section03 .flow{
	border: solid 2px #202020;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top:15px;
	background: url("back-img-flow.png") repeat-x 0 0;
}
#tano-main-area #section03 .flow div{
	display: block;
}
#tano-main-area #section03 .flow .left{
	padding: 10px;
}
#tano-main-area #section03 .flow .right{
	padding: 0 10px 10px;
}
#tano-main-area #section03 .flow .left .box-inner{
	width: 458px;
}
#tano-main-area #section03 .step01 .left .box-inner{
	height: 228px;
}
#tano-main-area #section03 .step02 .left .box-inner,
#tano-main-area #section03 .step03 .left .box-inner,
#tano-main-area #section03 .step04 .left .box-inner{
	height: 292px;
}
#tano-main-area #section03 .flow .right .box-inner{
	width: 460px;
}
#tano-main-area #section03 .flow .right h3.title{
	font-size: 18px;
	font-weight: bold;
	color: #000;
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
#tano-main-area #section03 .flow .right h3.title span{
	padding: 3px 0 0 3px;
}
#tano-main-area #section03 .flow .right p{
	font-size: 16px;
	color: #000;
	margin:0;
	padding: 5px 0 0;
	line-height: 1.75em;
}
#tano-main-area #section03 .arrow{
	text-align: center;
	margin: 25px auto 30px;
	height: 50px;
}
#tano-main-area #section03 .arrow img{
	width: 100px;
	height: 50px;
}

/*-----------------------------	
	#section04
-----------------------------*/
#tano-main-area #section04 .link{
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap:30px;
	margin-bottom: 5px;
}
#tano-main-area #section04 .link [class^=box]{
	background: url("dot.png") repeat;
	border:solid 2px #202020;
	text-align: center;
}
#tano-main-area #section04 .link [class^=box] .top{
	padding: 15px 12px;
	display: block;
	text-decoration: none;
}
#tano-main-area #section04 .link [class^=box] .title{
	font-size: 14px;
	color: #202020;
	margin: 8px 0 10px;
}
#tano-main-area #section04 .link [class^=box] .title .name{
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
}
#tano-main-area #section04 .link [class^=box] .title .name p{
	font-size: 28px;
	font-weight: bold;
	margin: 0;
}
#tano-main-area #section04 .link [class^=box] a.top .image{
	height: 214px;
	height: 214px;
	display: inline-block;
}
#tano-main-area #section04 .link .box-01 a.top .image{
	background: url(section04-img01.png) no-repeat 0 0;
}
#tano-main-area #section04 .link .box-02 a.top .image{
	background: url(section04-img02.png) no-repeat 0 0;
}
#tano-main-area #section04 .link [class^=box] a.top .image img{
	visibility: hidden;
}
#tano-main-area #section04 .link [class^=box] .title .text p{
	font-size: 20px;
	margin:5px 0 10px;
}

/*-----------------------------	
	img
-----------------------------*/
.tano-item-detail-box-3 .tano-item-detail .tano-item-detail-center img,
.tano-item-detail-box-4 .tano-item-detail .tano-item-detail-center img  {
    border: 0;
}
/*-----------------------------	
	.tano-back-color-blue-green
-----------------------------*/
#tano-main-area h3.tano-back-color-blue-green{
	padding: 7px 0 6px 0;
	font-size: 1.65rem;
	text-align: center;
	background: #00996d;
	border-bottom:1px solid #ccc;
	color: #fff;
}
/*-----------------------------	
	.tano-back-color-blue-orange
-----------------------------*/
#tano-main-area h3.tano-back-color-orange{
	padding: 7px 0 6px 0;
	font-size: 1.65rem;
	text-align: center;
	background: #ff873a;
	border-bottom:1px solid #ccc;
	color: #fff;
}