@charset "UTF-8";

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Noto Sans CJK JP"),
    local("Noto Sans JP"),
    url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
    url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
    url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
}

/*リセット*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, 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,
table, caption, tbody, tfoot, thead, tr, th, td,
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;
    vertical-align:baseline;
    background:transparent;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

ul,li,nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
	margin:0;
	padding:0;
	vertical-align:baseline;
	background:transparent;
	text-decoration: none;

}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}
/*リセット*/






* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

html{	font-size: 62.5%;}

body{
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans JP", '游ゴシック', YuGothic, "游ゴシック体", 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif;
	line-height: 1.8;
	font-size: 1.6rem;
	color: #333;
	word-break: break-all;
	font-feature-settings : "palt"
}

header{
	width: 100%;
	background: #fff;
	border-top: 4px solid #23b399;
	box-shadow: 1px 1px 15px rgba(30,30,30,0.10);
	position: fixed;
	z-index: 1000;
}



.head{
	display: flex;
	justify-content: space-between;
}

.navi{
	width: 520px;
	display: flex;
	align-items: center;
}

.navi ul{
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.navi ul li{
	width: 25%;
	text-align: center;
}

.navi ul li a{
	display: inline-block;
	color: #333;
	font-weight: 600;
	position: relative;
}

.navi ul li a::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: -5px;
	width: 0%;
	height: 1px;
	background: #23b399;
	transition: all 0.4s;
}

.navi ul li a:hover::after{
	width: 100%;
}


/*** ドロワーメニュー ***/


.nav-drawer {
	position: relative;
	top: 14px;
}

.nav-unshown { display:none;}

#nav-open {
	display: inline-block;
	width: 35px;
	height: 25px;
	margin-top: -6px;
	vertical-align: middle;
}

#nav-open span, #nav-open span:before, #nav-open span:after {
	position: absolute;
	height: 3px;/*線の太さ*/
	width: 28px;/*長さ*/
	background: #333;
	display: block;
	content: '';
	cursor: pointer;
}

#nav-open span:before {bottom: -10px;}
#nav-open span:after {bottom: -21px;}

#nav-close {
	display: none;/*はじめは隠しておく*/
	position: fixed;
	z-index: 99;
	top: 0;/*全体に広がるように*/
	left: 0;
	width: 100%;
	height: 100%;
	background: #eee;
	opacity: 0;
	transition: .3s ease-in-out;
}

.nav-content {
	overflow: auto;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9999;/*最前面に*/
	width: 100%;/*左に隙間を作る（閉じるカバーを表示）*/
	/*max-width: 280px;最大幅*/
	height: 90%;
	background: #fff;
	transition: .3s ease-in-out;
	-webkit-transform: translateY(-105%);
	transform: translateY(-105%);
	padding: 15px;
}

#nav-input:checked ~ #nav-close {
	display: block;/*カバーを表示*/
	opacity: .7;
}

#nav-input:checked ~ .nav-content {
	-webkit-transform: translateY(0%);
	transform: translateY(0%);/*中身を表示（右へスライド）*/
	box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

.menu{
	padding: 20px 20px 10px 20px;
}


.menu li{
	text-align: center;
	border-bottom: 1px solid rgba(0,0,0,0.5);
	font-size: 1.8rem;
	padding: 8px 10px 8px 10px;
	color: #181818;
}

.menu li:hover{
	opacity: 0.7;
}


.menu li a{
	display: block;
	color: #333;
	padding: 8px;
	text-decoration: none;
}

.menu li a i{
	font-style: normal;
	font-size: 1.2rem;
	letter-spacing: 2px;
	margin-left: 8px;
}

.close{
	display: flex;
	justify-content: center;
}

.close label{
	width: 80%;
	display: inline-block;
	padding: 6px 17px 4px 17px;
	font-size: 1.8rem;
	text-align: center;
}





footer{
	background: #23b399;
	padding: 50px 0;
}

footer p{
	text-align: center;
	color: #fff;
}

footer small{
	font-style: normal;
}



/**************　ヘッダー　レスポンシブ　*************************************/
	@media screen and (min-width: 769px){
		header h1{
			padding-top: 8px;
		}
		.head{
			width: 1000px;
			margin: 0 auto;
			padding: 10px 0;
		}

	}/* PC */
	@media screen and (min-width: 481px) and (max-width: 768px){
		.head{
			padding: 0px 0 0 8px;
			height: 70px;
		}
		header h1{
			padding-top: 10px;
		}
	}/* TAB */
	@media screen and (min-width: 1px) and (max-width: 480px){
		.head{
			padding: 8px 8px 0 8px;
			height: 70px;
		}
		header h1{
			padding-top: 2px;
		}
	}/* SMP */




.menu_btn p:after{
	content: "\f0fe";
	display: inline-block;
	font-family: "FontAwesome";
	position: absolute;
	right: 10px;
	top: 0px;
}


#page_top{
	display: block;
	width      : 50px;
	height     : 50px;
	position   : fixed;
	right      : 30px;
	bottom     : 30px;
	background: #3c6571;
	border-radius: 50px;
	text-align: center;
	line-height: 46px;
}

#page_top:hover{
	opacity: 0.7;
}


/**************　メイン　*************************************/


.box01{
	padding: 104px 0 0 0;
	min-height: 700px;
	background-attachment: fixed;
	overflow: hidden;
	position: relative;
}

.box01 .cont{
	min-height: 600px;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 50;
}

.main_img {
    z-index:10;
    opacity: 0;
    width: 100%;
    height: 700px;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 30s 0s infinite;
    animation: anime 30s 0s infinite;
}

.main_img:nth-of-type(2) {
      -webkit-animation-delay: 10s;
      animation-delay: 10s; }


.main_img:nth-of-type(3) {
      -webkit-animation-delay: 20s;
      animation-delay: 20s; }


@keyframes anime {
  0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    32% {
        opacity: 1;
    }
    48% {
        opacity: 0;
        transform: scale(1.1) ;
         z-index:9;
    }
    100% { opacity: 0 }
}


.catchcopy{
	color: #fff;
	font-weight: bold;
	font-size: 6rem;
	text-shadow: 1px 1px 8px rgba(0,0,0,0.3);
	line-height: 1.4;
}
.box02{
	position: relative;
}
.box02 .img{

	max-width: 735px;
	width: 48%;
	height: auto;
	z-index: 100;
}


.box03 .title{
	color:#fff;
}


.box03{
	background: url("/img/box03_top.png") top right no-repeat #4fc1ac;
}

.box03_wrap{
	background: url("/img/box03_bottom.png") bottom left no-repeat;
}

.box04{
	background: url("/img/box04_bg.jpg") -60px 0 repeat;

}

.cont{
	width: 100%;
	margin: 0 auto;
}

.title{
	font-size: 7rem;
	display: inline-block;
	height: 95px;
}

.title .kana{
	font-style: normal;
	font-size: 2.4rem;
	margin: 0 0 0 15px;
	position: relative;
	top: -18px;
	letter-spacing: 2px;
}

.service_list{
	margin: 0 auto 20px;
}

.service_list li{
	font-size: 2rem;
	font-weight: bold;
	margin: 0 auto 20px;
}


.service_list li .number{
	font-family: "Impact", sans-serif;
	font-weight: normal;
	color: #fff;
	background: #50c3af;
	border-radius: 36px;
	display: inline-block;
	height: 36px;
	width: 36px;
	line-height: 36px;
	text-align: center;
	margin: 0 10px 0px 0;
}

.table01{
	border: 1px solid #fff;
	
}

.table01 table{
	width: 100%;
	border-collapse:  collapse;
	color: #fff;
	font-size: 1.4rem;
}

.table01 table th{
	width: 260px;
	text-align: center;
	font-weight: 400;
	padding: 20px 10px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	vertical-align: middle;
}

.table01 table td{
	padding: 20px;
	border-bottom: 1px solid #fff;
	vertical-align: middle;
}



.table02{
	border: 1px solid #333;
	margin: 0 auto 65px;
	font-size: 1.4rem;
}

.table02 table{
	width: 100%;
	border-collapse:  collapse;
	color: #333;
}

.table02 table th{
	width: 260px;
	text-align: center;
	font-weight: 400;
	padding: 20px 10px;
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
	vertical-align: middle;
}

.table02 table td{
	padding: 20px;
	border-bottom: 1px solid #333;
	vertical-align: middle;
}

		.table01 table tr:last-child th,
		.table01 table tr:last-child td,
		.table02 table tr:last-child th,
		.table02 table tr:last-child td{
			border-bottom: none;
		}

.contact_btn{
	display: block;
	margin: 0 auto;
	text-align: center;
	width: 620px;
	border-radius: 100px;
	color: #fff;
	font-weight: 500;
	height: 80px;
	line-height: 80px;
	font-size: 1.8rem;
	letter-spacing: 2px;
	background: #21ae95; /* Old browsers */
	background: -moz-linear-gradient(left,  #21ae95 0%, #21ae95 52%, #3c6571 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #21ae95 0%,#21ae95 52%,#3c6571 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #21ae95 0%,#21ae95 52%,#3c6571 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#21ae95', endColorstr='#3c6571',GradientType=1 ); /* IE6-9 */
	transition: 0.5s;
	box-shadow: 5px 5px 1px rgba(0,0,0,0.13);
	position: relative;
}

.contact_btn:hover{
	filter: brightness(125%);
	transform: translate(5px,5px);
	box-shadow: none;
	transition: 0.5s;
}

.contact_btn::after{
	content: "";
	display: inline-block;
	background: url("/img/arrow.png") 0 0 no-repeat;
	width: 12px;
	height: 22px;
	position: absolute;
	top:28px;
	right: 30px;
}


	@media screen and (min-width: 769px){
		.cont{
			width: 1000px;
		}
		.box02{
			padding: 90px 0 140px;
			min-height: 700px;
		}
		.box02 .img{
			position: absolute;
			right: 0;
			top: -65px;
		}
		.box03{
			min-height: 700px;
		}

		.box03_wrap{
			padding: 90px 0 140px;
		}
		.box04{
			min-height: 700px;
			padding: 90px 0 80px;
		}
		.box02 .title,.box03 .title,.box04 .title{
			margin: 0 0 120px 0;
		}


	}/* PC */
	@media screen and (min-width: 481px) and (max-width: 768px){
		.box01{
			padding: 70px 0 0 0;
			min-height: 400px;
		}
		.box01 .cont{
			min-height: 330px;
			padding-left: 10px;
		}
		.main_img {
		    height: 400px;
		}

		.catchcopy{
			color: #fff;
			font-weight: bold;
			font-size: 4rem;
			text-shadow: 1px 1px 8px rgba(0,0,0,0.3);
			line-height: 1.4;
		}
		.box02{
			padding: 20px 20px 40px 20px;
		}
		.box02 .img{
			position: absolute;
			right: 0;
			top: -65px;
		}
		.box03{
			background-size: 400px auto;
		}

		.box03_wrap{
			padding: 20px 20px 40px 20px;
			background-size: 400px auto;
		}

		.box04{padding: 20px 20px 60px 20px; background-size: 1000px auto;}


		.title{
			font-size: 4rem;
			display: inline-block;
			margin: 0 0 0px 0;
		}

		.title .kana{
			font-style: normal;
			font-size: 1.5rem;
			margin: 0 0 0 10px;
			position: relative;
			top: -10px;
			letter-spacing: 2px;
		}
		.service_list li{font-size: 1.5rem; position: relative; z-index: 110; text-shadow: 2px 1px 0px #fff;}
		#page_top{
			width      : 40px;
			height     : 40px;
			line-height: 36px;
		}

	}/* TAB */
	@media screen and (min-width: 1px) and (max-width: 480px){
		.box01{
			padding: 70px 0 0 0;
			min-height: 280px;
		}
		.box01 .cont{
			min-height: 210px;
			padding-left: 10px;
		}
		.main_img {
		    height: 280px;
		}

		.catchcopy{
			color: #fff;
			font-weight: bold;
			font-size: 2.4rem;
			text-shadow: 1px 1px 8px rgba(0,0,0,0.3);
			line-height: 1.4;
		}

		.title{
			font-size: 4rem;
			display: inline-block;
			margin: 0 0 0px 0;
		}

		.title .kana{
			font-style: normal;
			font-size: 1.5rem;
			margin: 0 0 0 10px;
			position: relative;
			top: -10px;
			letter-spacing: 2px;
		}
		.service_list li{font-size: 1.5rem; position: relative; z-index: 110; text-shadow: 2px 1px 0px #fff;}
		.service_list li .number{
			border-radius: 26px;
			display: inline-block;
			height: 26px;
			width: 26px;
			line-height: 26px;
			text-align: center;
			margin: 0 8px 0px 0;
			text-shadow: none;
		}

		.contact_btn{
			width: 85%;
		}
		.box02{
			padding: 15px 10px 40px 10px;
			overflow: hidden;
		}
		.box02 .img{
			position: absolute;
			right: -70px;
			bottom: 14px;
			width: 70%;
			height: auto;
		}

		.box03{
			background-size: 400px auto;
		}

		.box03_wrap{
			padding: 15px 10px 40px 10px;
			background-size: 400px auto;
		}

		.box04{padding: 15px 10px 40px 10px; background-size: 600px auto;}
		.table01 table th{
			width: 35%;
			padding: 15px 8px;

		}
		.table01 table td{
			width: 65%;
			padding: 15px 10px;

		}
		.table02{margin-bottom: 40px;}

		.table02 table th{
			width: 35%;
			padding: 15px 8px;
		}
		.table02 table td{
			width: 65%;
			padding: 15px 10px;
		}

		#page_top{
			width      : 30px;
			height     : 30px;
			line-height: 24px;
			right: 15px;
		}

		#page_top img{
			width: 16px; height: auto;
		}
	}/* SMP */



/**********************
test
******************************/










.motion-txt {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.motion-txt:after {
  content: '';
  position: absolute;
  opacity: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
	background:#23b399;
  transform: translate3d(-101%, 0, 0);
}
.js-scroll.show .motion-txt:after {
  transition-property: transform, opacity;
  transition-duration: 0.5s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(0, 0, 0);
}
.js-scroll.done .motion-txt:after {
  transition-property: transform;
  transition-duration: 0.5s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(103%, 0, 0);
}
.motion-txt .motion-inner {
  display: inline-block;
  opacity: 0;
}
.js-scroll.done .motion-txt .motion-inner {
  opacity: 1;

}


.motion02{
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.motion02:after {
  content: '';
  position: absolute;
  opacity: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
	background:#4e9e95;
  transform: translate3d(-101%, 0, 0);
}
.js-scroll02.show02 .motion02:after {
  transition-property: transform, opacity;
  transition-duration: 0.5s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(0, 0, 0);
}
.js-scroll02.done02 .motion02:after {
  transition-property: transform;
  transition-duration: 0.5s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(103%, 0, 0);
}
.motion02 .motion-in02 {
  display: inline-block;
  opacity: 0;

}
.js-scroll02.done02 .motion02 .motion-in02 {
  opacity: 1;

}

.js-scroll02.done02 .list01{
	background: url("/images/list01.jpg") 0 0 no-repeat;
	background-size: cover;

}

.js-scroll02.done02 .list02{
	background: url("/images/list02.jpg") 0 0 no-repeat;
	background-size: cover;

}

.js-scroll02.done02 .list03{
	background: url("/images/list03.jpg") 0 0 no-repeat;
	background-size: cover;

}






/********************** アニメーション設定 ************************/
.anime01{
	position: relative;
	opacity: 0;
	bottom: -1em;
}

.anime01-active{
	opacity: 1 !important;
	bottom: 0 !important;
	-webkit-transition: 1s;
	-moz-transition: 1s ;
	transition: 1s;
}

.anime02{
	opacity: 0;
}

.bounceInDown{
	opacity: 1 !important;
	-webkit-transition: 1s;
	-moz-transition: 1s ;
	transition: 1s;
}

.anime03{
	position: relative;
	opacity: 0;
	bottom: -2em;
}

.anime03-active{
	opacity: 1 !important;
	bottom: 0 !important;
	-webkit-transition: 1s;
	-moz-transition: 1s ;
	transition: 1s;
}

.anime04{
	position: relative;
	opacity: 0;
	left: -2em;
}

.anime04-active{
	opacity: 1 !important;
	left: 0 !important;
	-webkit-transition: 1s;
	-moz-transition: 1s ;
	transition: 1s;
}


	/* デバイスによって省略するアイテム */
	@media screen and (min-width: 769px){
		.hide_pc{
			display: none;
		}
	}/* PC */
	@media screen and (min-width: 481px) and (max-width: 768px){
		.hide_tb{
			display: none;
		}
	}/* TAB */
	@media screen and (min-width: 1px) and (max-width: 480px){
		.hide_sp{
			display: none;
		}
	}/* SMP */


/********************** フォント指定 ************************/
/* フォントサイズ */
.xx-small{ font-size: 0.8rem;}
.x-small{ font-size: 1.0rem;}
.small{ font-size: 1.2rem;}
.meddium{ font-size: 1.4rem;}
.large{ font-size: 1.6rem;}
.x-large{ font-size: 1.8rem;}
.xx-large{ font-size: 2.4rem;}
/* 文字揃え */
.center{ text-align: center;}
.t_left{ text-align: left;}
.t_right{ text-align: right;}
/* 文字スタイル */
.bold{ font-weight: bold;}
.normal{ font-weight: normal;}
.underline{ text-decoration: underline;}
/* 行間 */
.lh2{line-height: 2;}

/********************** カラー指定 ************************/
.red{ color:#ff364d !important;}
.l_gray{ color:#f5f5f5;}
.gray{ color:#e4e4e4;}
.d_gray{ color:#333e48;}
.white{ color:#ffffff;}
.blue{ color: #005491;}
.yellow{color: #ffe000;}
.green{color: #1ea821;}
.l_grn{color: #d8ff00;}
.orange{color: #ffc600;}


/********************** 背景指定 ************************/
/* 背景色 */
.bg_gray{ background:#f5f5f5;}
.bg_red{ background:#e2041b;}
.bg_white{ background:#ffffff;}
.bg_black{ background:#000000;}

/********************** スペース指定 ************************/
.m0 {margin: 0px;}.mt0{ margin-top: 0px;}.mr0{ margin-right: 0px;}.mb0{ margin-bottom: 0px;}.ml0{ margin-left: 0px;}
.mt2{ margin-top: 2px;}.mr2{ margin-right: 2px;}.mb2{ margin-bottom: 2px;}.ml2{ margin-left: 2px;}
.mt5{ margin-top: 5px;}.mr5{ margin-right: 5px;}.mb5{ margin-bottom: 5px;}.ml5{ margin-left: 5px;}
.mt10{ margin-top: 10px;}.mr10{ margin-right: 10px;}.mb10{ margin-bottom: 10px;}.ml10{ margin-left: 10px;}
.mt20{ margin-top: 20px;}.mr20{ margin-right: 20px;}.mb20{ margin-bottom: 20px;}.ml20{ margin-left: 20px;}
.mt30{ margin-top: 30px;}.mr30{ margin-right: 30px;}.mb30{ margin-bottom: 30px;}.ml30{ margin-left: 30px;}
.mt40{ margin-top: 40px;}.mr40{ margin-right: 40px;}.mb40{ margin-bottom: 40px;}.ml40{ margin-left: 40px;}
.mt50{ margin-top: 50px;}.mr50{ margin-right: 50px;}.mb50{ margin-bottom: 50px;}.ml50{ margin-left: 50px;}
.mt60{ margin-top: 60px;}.mr60{ margin-right: 60px;}.mb60{ margin-bottom: 60px;}.ml60{ margin-left: 60px;}
.mt70{ margin-top: 70px;}.mr70{ margin-right: 70px;}.mb70{ margin-bottom: 70px;}.ml70{ margin-left: 70px;}
.mt80{ margin-top: 80px;}.mr80{ margin-right: 80px;}.mb80{ margin-bottom: 80px;}.ml80{ margin-left: 80px;}
.mt100{ margin-top: 100px;}.mr100{ margin-right: 100px;}.mb100{ margin-bottom: 100px;}.ml100{ margin-left: 100px;}
.mt120{ margin-top: 120px;}.mr120{ margin-right: 120px;}.mb120{ margin-bottom: 120px;}.ml120{ margin-left: 120px;}
.p0{ padding: 0px;}.pt0{ padding-top: 0px;}.pr0{ padding-right: 0px;}.pb0{ padding-bottom: 0px;}.pl0{ padding-left: 0px;}
.p5{ padding: 5px;}.pt5{ padding-top: 5px;}.pr5{ padding-right: 5px;}.pb5{ padding-bottom: 5px;}.pl5{ padding-left: 5px;}
.p10{ padding: 10px;}.pt10{ padding-top: 10px;}.pr10{ padding-right: 10px;}.pb10{ padding-bottom: 10px;}.pl10{ padding-left: 10px;}
.p15{ padding: 15px;}.pt15{ padding-top: 15px;}.pr15{ padding-right: 15px;}.pb15{ padding-bottom: 15px;}.pl15{ padding-left: 15px;}
.p20{ padding: 20px;}.pt20{ padding-top: 20px;}.pr20{ padding-right: 20px;}.pb20{ padding-bottom: 20px;}.pl20{ padding-left: 20px;}
.p30{ padding: 30px;}.pt30{ padding-top: 30px;}.pr30{ padding-right: 30px;}.pb30{ padding-bottom: 30px;}.pl30{ padding-left: 30px;}
.p40{ padding: 40px;}.pt40{ padding-top: 40px;}.pr40{ padding-right: 40px;}.pb40{ padding-bottom: 40px;}.pl40{ padding-left: 40px;}
.p50{ padding: 50px;}.pt50{ padding-top: 50px;}.pr50{ padding-right: 50px;}.pb50{ padding-bottom: 50px;}.pl50{ padding-left: 50px;}
.p60{ padding: 60px;}.pt60{ padding-top: 60px;}.pr60{ padding-right: 60px;}.pb60{ padding-bottom: 60px;}.pl60{ padding-left: 60px;}
.p70{ padding: 70px;}.pt70{ padding-top: 70px;}.pr70{ padding-right: 70px;}.pb70{ padding-bottom: 70px;}.pl70{ padding-left: 70px;}
.p80{ padding: 80px;}.pt80{ padding-top: 80px;}.pr80{ padding-right: 80px;}.pb80{ padding-bottom: 80px;}.pl80{ padding-left: 80px;}
.p100{ padding: 100px;}.pt100{ padding-top: 100px;}.pr100{ padding-right: 100px;}.pb100{ padding-bottom: 100px;}.pl100{ padding-left: 100px;}

/********************** その他設定 ************************/
/* 回り込み */
.left{ float: left;}
.right{ float: right;}
.clear{ clear: both;}
.clearfix:after{display: block;clear: both;content: "";}
/* 透過 */
.alpha20{ opacity: 0.2; filter: alpha(opacity=20); -ms-filter: "alpha(opacity=20)";}
.alpha40{ opacity: 0.4; filter: alpha(opacity=40); -ms-filter: "alpha(opacity=40)";}
.alpha60{ opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "alpha(opacity=60)";}
.alpha80{ opacity: 0.8; filter: alpha(opacity=80); -ms-filter: "alpha(opacity=80)";}
/* 角丸 */
.kadomaru5{ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
.kadomaru10{ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
/* ワイド */
.w20{ width: 20%; margin: 0px auto 0px;}
.w30{ width: 30%; margin: 0px auto 0px;}
.w40{ width: 40%; margin: 0px auto 0px;}
.w60{ width: 60%; margin: 0px auto 0px;}
.w87{ width: 87%; margin: 0px auto 0px;}
.w100{ width: 100%;}
.w270{ width: 270px; margin: 0px auto 0px;}
.w540{ width: 540px; margin-left: auto; margin-right: auto;}
.w600{ width: 600px; margin-left: auto; margin-right: auto;}
.w700{ width: 700px; margin-left: auto; margin-right: auto;}
.w900{ width: 900px; margin: 0px auto 0px;}
.w1000{ width: 1000px; margin: 0px auto 0px;}
.w1100{ width: 1100px; margin: 0px auto 0px;}
.w1150{ width: 1150px; margin: 0px auto 0px;}
.w1200{ width: 1200px; margin: 0px auto 0px;}
.w1260{ width: 1260px; margin: 0px auto 0px;}
/* 高さ */
.hai{ haight: auto;}
.ul{ background: linear-gradient(transparent 70%, yellow 70%);}
.bn{ border: none;}