/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

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;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;}

body {line-height:1;}

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

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;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;}

/* 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;}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;}


a {text-decoration: none;}
li {list-style: none;}
img {width: 100%;
	vertical-align:top;}

/*------------------------------*/

.flex {
display: flex;
flex-wrap: wrap;}

/*------------------------------*/
#sp_header {display: none;}
.sp_nav {display: none;}
.sp_price br {display: none;}
/*------------------------------*/

body {
width: 100%;
margin: 0 auto;
font-size: 62.5%;
color: #333333;
font-family: 'Noto Sans JP', sans-serif;}

/*------------------------------*/
/*header*/
#header {
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #fff;
z-index: 500;
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08);}

.inner_header {
max-width: 1200px;
align-items: center;
justify-content: space-between;
align-items: center;
margin: 0 auto;
padding-left: 16px;}

.logo_otokuna{width: 140px;}

.ul_header {align-items: center;}
.li_header {
text-align: center;
justify-content: center;
vertical-align: middle;
border-right: 1px solid #E1E1E1;}

.last_li_header {border-right: 0;}

.a_header {
display: block;
color: #333333;
font-size: 1.5em;
font-weight: 500;
letter-spacing: 0.07em;
padding: 4px 24px;}

.a_header:hover {color: #fa8200;}

.btn {
width: 200px;
display: block;
text-align: center;
font-size: 1.5em;
background-color: #fa8200;
color: #fff;
padding: 24px 0;}

.btn_active {
width: 200px;
display: block;
text-align: center;
font-size: 1.5em;
background-color: #3eba2b;
color: #fff;
cursor: default;
padding: 24px 0;}

.arrow {
  position: relative;
  display: inline-block;
  padding-right: 24px;}
.arrow:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 42px;
  bottom: 0;
  margin: auto;}

.arrow_down {
  position: relative;
  display: inline-block;
  padding-right: 24px;}
.arrow_down:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(135deg);
  position: absolute;
  top: 0;
  right: 42px;
  bottom: 0;
  margin: auto;}
/*------------------------------*/


/*----------------------------*/
/*base.html*/
#company {
max-width: 1000px;
margin: 120px auto;
padding: 0 40px;
}
.h1_base {
position: relative;
text-align: left;
font-size: 2.8em;
color: #004831;
letter-spacing: 0.1em;
text-indent: 0.1em;
padding-bottom: 10px;}

.sub_h1_base {
font-size: 1.3em;
color: #989898;}

.h1_outer {
position: relative;
padding-bottom: 40px;
border-bottom: 4px solid #004831;}
.h1_outer::after{
content: "";
    position: absolute;
    right: 0;
    bottom: -4px;
    width: 90%;
    border-bottom: 4px solid #ebebeb;}

.outer_dl {margin: 80px 0;}

.dl_base {
font-size: 1.5em;
display: flex;
flex-wrap: wrap;
	align-items: stretch;	
	width: 100%;
	font-weight: 600;
position: relative;
margin-top: 60px;
padding: 40px;
background-color: #fff;
border-radius: 12px;
box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);
line-height: 1.6em;}
	
.dt_base{
text-align: left;
color: #004831;
padding: 10px 0;
width: 250px;
letter-spacing: 0.06em;}
.dd_base{
background: #fff;
padding: 10px 0;
padding-left: 16px;
border-left: 2px solid #ebebeb;
width: calc(100% - 250px);
vertical-align: middle;
margin-bottom: 20px;}
	
.bg_section::after {
position: absolute;
bottom: 0;
right: 0;
content: "";
background: #004831;
height: calc(tan(60deg) * 60px / 2);
width: 60px;
clip-path: polygon(100% 0, 100% 100%, 0 100%);
border-bottom-right-radius: 12px;}
  
 /*----------------------------*/
#footer {
background-color: #004831;
padding: 80px 0;
margin-top: 80px;}

.ul_footer{
justify-content: center;
align-items: center;}

.li_footer {
font-size: 1.4em;
margin-right: 30px;}

.last_li_footer {margin-right: 0;}

.a_footer {color: #fff;}
ul.list_UL { margin-left: 1em; }
ul.list_UL li { list-style: disc; }
/* ---------- only PC ------------------------------------------------------------ */
@media screen and (min-width:641px) {
	.onlyPC { }
	.onlySP { display: none; }
}

/* ---------- for SmartPhone ------------------------------------------------------------ */
@media screen and (max-width:640px) {
	.onlyPC { display: none; }
	.onlySP { }

	/*------------------------*/
	#sp_header {display: block;}
	.sp_nav {display: block;}
	/*------------------------*/
	#header {display: none;}

	/*------------------------*/

	#sp_header {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		background-color: #fff;
		z-index: 1000;
		box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08);}

	#sp_nav {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 1000;
		background-color: #fff;}

	.inner_sp_header {
		width: 100%;
		align-items: center;
		justify-content: center;
		padding: 10px 0;}

	.sp_logo_otokuna{
		width: 110px;
		margin: 0 auto;}

	.ul_sp_header {
		align-items: flex-end;
		width: 100%;}
	.li_sp_header {
		width: 19%;
		text-align: center;
		justify-content: center;
		vertical-align: middle;
		border-right: 0;
		padding-bottom: 7px;}

	.li_sp_01 {width: 12%;}
	.li_sp_02 {width: 22%;}
	.li_sp_03 {width: 16%;}
	.li_sp_04 {width: 23%;}

	.last_li_header {border-right: 0;}

	.a_sp_header {
		display: block;
		color: #004831;
		font-size: 1em;
		font-weight: 600;
		letter-spacing: 0.07em;
		padding: 4px 10px;}

	.sp_btn {
		width: 100%;
		display: block;
		text-align: center;
		font-size: 1.3em;
		background-color: #fa8200;
		color: #fff;
		padding: 24px 10px;}

	.li_sp_btn {width: 27%;}

	.icon_01 {
		background: url("../img/nav_01.png") 0 0 / 100% auto no-repeat;}
	.icon_02 {
		background: url("../img/nav_02.png") 0 0 / 100% auto no-repeat;}
	.icon_03 {
		background: url("../img/nav_03.png") 0 0 / 100% auto no-repeat;}
	.icon_04 {
		background: url("../img/nav_04.png") 0 0 / 100% auto no-repeat;}
	.nav {
		position: relative;
		padding-top: 32px;
		background-size: 26px 26px;
		background-position: top 3px center;}

	#company {
		max-width: 1000px;
		margin: 120px auto;
		padding: 0 20px;}
	.h1_base {
		position: relative;
		text-align: left;
		font-size: 2.2em;
		color: #004831;
		letter-spacing: 0.1em;
		text-indent: 0.1em;
		padding-bottom: 10px;}

	.sub_h1_base {
		font-size: 1.2em;
		color: #989898;}

	.h1_outer {
		position: relative;
		padding-bottom: 30px;
		border-bottom: 4px solid #004831;}
	.h1_outer::after{
		content: "";
		position: absolute;
		right: 0;
		bottom: -4px;
		width: 90%;
		border-bottom: 4px solid #ebebeb;}

	.outer_dl {margin: 30px 0;}

	.dl_base {
		font-size: 1.4em;
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;	
		width: 100%;
		font-weight: 600;
		position: relative;
		margin-top: 60px;
		padding: 40px 20px;
		background-color: #fff;
		border-radius: 12px;
		box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);
		line-height: 1.6em;}

	.dt_base{
		text-align: left;
		color: #004831;
		padding: 0;
		padding-bottom: 4px;
		width: 100%;
		letter-spacing: 0.06em;}
	.dd_base{
		background: #fff;
		padding: 0;
		padding-left: 0;
		border-left: 0;
		width: 100%;
		vertical-align: middle;
		padding-bottom: 20px;
		margin-bottom: 20px;
		border-bottom: 2px solid #ebebeb;}

	.bg_section::after {
		position: absolute;
		bottom: 0;
		right: 0;
		content: "";
		background: #004831;
		height: calc(tan(60deg) * 60px / 2);
		width: 60px;
		clip-path: polygon(100% 0, 100% 100%, 0 100%);
		border-bottom-right-radius: 12px;}
  
	/*----------------------------*/
	/*footer*/
	#footer {
		background-color: #004831;
		padding: 80px 0;
		margin-top: 80px;
		margin-bottom: 53px;}

	.ul_footer{
		justify-content: center;
		align-items: center;}

	.li_footer {
		font-size: 1.2em;
		margin-right: 10px;}

	.last_li_footer {margin-right: 0;}

	.a_footer {color: #fff;}

/*----------------------------*/
}