@charset "utf-8";

body {
  font-size:16px;
  font-family: "m-plus-rounded-1p", sans-serif;
  font-weight: 400;
  font-style: normal;
  -webkit-text-size-adjust: 100%;
  letter-spacing:2px;
}
@media only screen and (max-width: 768px) {
body {
	line-height: 1.8;
	font-size:1rem;
}
}
/* PC・大型タブレット用 */
.wrapper980 {
	width:980px;
	margin: 0px auto;
	padding:50px 0;
    line-height: 1.8;
}
.wrapper1100 {
	width:1100px;
	margin: 0 auto;
    line-height: 1.8;
	text-align: left;
	padding:50px 0;
}
.wrapper980 p, .wrapper1100 p{
	margin:30px;
}
/* スマホ・タブレット用 */
@media screen and  (max-width: 980px) {
.wrapper980, .wrapper1100 {
	width: 100%;
	line-height:1.8;
}
}

/* グローバルメニュー */
.header{
  background:#2c2e3a;
  left: 0;
  top: 0;
  width: 100%;
  height:60px;
}
.header_inner {
  position: relative;
  padding: 15px;
}
.logo{
  position: absolute;
  top: 50%;
  left: 0;
  padding: 5px 20px;
}
.title{
  font-family: "m-plus-rounded-1p", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2rem;
  letter-spacing:3px;
  color:#eeeeee;
}

/* header固定のため余白をつける。メニューのCSSには関係ない */
.main{  
  margin-top: 60px;
}
@media only screen and (min-width: 769px) {
.header_inner{
  max-width: 980px;
  width: 100%;
  padding: 15px 30px;
  margin-left: auto;
  margin-right: auto;
}
.nav {
  position: absolute;
  right: 30px; /* 右から出てくる */
}
.nav_list{
  text-align: right;
}
.nav_list li{
  display: inline-block;
  text-align: right;
  padding-left: 20px;
}
.nav_list li a{
  color: #eeeeee;
  font-family: "m-plus-rounded-1p", sans-serif;
  font-weight: 400;
  font-style: normal;
}
}
/* pc */
@media only screen and (max-width: 768px) {
.nav {
  position: fixed;
  right: -320px; /* 右から出てくる */
  top: 0;
  width: 300px; /* スマホに収まるサイズ */
  height: 100vh;
  padding-top: 60px;
  background-color: #2c2e3a;
  transition: all .6s;
  z-index: 200;
  overflow-y: auto; /* メニューが多くなったらスクロールできるように */
}
.hamburger {
  position: absolute;
  right: 15px;
  top: 8px;
  width: 40px; /* クリックしやすい幅 */
  height: 40px; /* クリックしやすい高さ */
  cursor: pointer;
  z-index: 300;
}
.nav_list {
  margin: 0;
  padding: 0;
  list-style: none;
  width:100%;
}
.nav_item {
  text-align: center;
  padding: 0 14px;
}
.nav_item a {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: #eeeeee;
}
.nav_item a:hover {
  background-color: #eee;
}
.hamburger_border {
  position: absolute;
  left: 11px;
  width: 18px;
  height: 2px;
  background-color: #eeeeee;
  transition: all .6s;
}
.hamburger_border_top {
  top: 14px;
}
.hamburger_border_center {
  top: 20px;
}
.hamburger_border_bottom {
  top: 26px;
}
.black_bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: #333;
  opacity: 0;
  visibility: hidden;
  transition: all .6s;
  cursor: pointer;
}

/* 表示された時用のCSS */
.nav-open .nav {
  right: 0;
}
.nav-open .black_bg {
  opacity: .8;
  visibility: visible;
}
.nav-open .hamburger_border_top {
  transform: rotate(45deg);
  top: 20px;
}
.nav-open .hamburger_border_center {
  width: 0;
  left: 50%;
}
.nav-open .hamburger_border_bottom {
  transform: rotate(-45deg);
  top: 20px;
}
}
/* sp */

/* ヘッダー */
.head_bg{
	background:url(../images/h-bg.webp) no-repeat;
	background-size: cover;
	height:auto;
}
.head_logo{
	display:block;
	margin: auto;
	padding:250px 0;
}
@media only screen and (max-width: 768px) {
.head_logo{
	padding:150px 0;
}
}
/* 背景 */
.section1{background:#2c2e3a; padding:30px 0 0 0; color:#eeeeee;}
.section2{background:#f9f9f9;}
.section3{background:#e9ebf4; padding:30px 0 0 0;}

.ttl{font-size:28px; text-align:center; letter-spacing:3px;}
.sf{font-size:12px;}
@media only screen and (max-width: 768px) {
.sf{font-size:0.6rem;}
}
/*画の設定
---------------------------------------------------------- */
/*スケーリング*/
.scaling1, .scaling2{
	width:auto;
	height:auto;
}
.scaling3{
	max-width:500px;
	height:auto;
}
@media only screen and (max-width: 768px) {
.scaling1{
	max-width:100%;
	height:auto;
}
.scaling2{
	max-width:90%;
	height:auto;
}
.scaling3{
	max-width:60%;
	height:auto;
}
}
.pc-img { display: inline-block;}		
.sp-img { display: none;}	
@media only screen and (max-width: 768px) {
.pc-img { display: none;}	
.sp-img { display: block;}	
}
/* 事業内容 */
*, *:before, *:after {
	box-sizing: border-box;
}
.col_3{
	width: 100%;
	margin: 0 auto;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_3 > div{
	width: calc((100% - 30px * 2) / 3);
	padding: 2rem 1.5rem 1.5rem 1.5rem;
	margin:1rem auto;
	background:#fff;
	-webkit-border-radius: 10px / 10px;
	-moz-border-radius: 10px / 10px;
	border-radius: 10px / 10px;
	color:#2e2d2a;
	display:flex;
	flex-direction: column;
}
.col_3_tb1{
	font-size:1.3rem;
	line-height:1.6;
	text-align:center;
	margin-bottom:1rem;
	font-family: source-han-sans-cjk-ja, sans-serif;
	font-weight: 900;
	font-style: normal;
}
.col_3_tb2{
	font-size:1rem;
	line-height:1.6;
	text-align:center;
}
.col_3_text {
  text-align: left;
  margin:auto;
}
.col_3_pict{
	width:40%;
	height:auto;
	margin: 0 auto;
	display:block;
}
.col_3_pict img {
  width: 100%;
  height:auto;
  margin-bottom:1rem;
}
@media screen and (max-width: 960px) {
.col_3 > div{
	width: calc((100% - 30px * 1) / 2);
}
}
@media screen and (max-width: 480px) {
.col_3 > div{
	width: 90%;
	padding: 1rem;
	background:#fff;
	-webkit-border-radius: 10px / 10px;
	-moz-border-radius: 10px / 10px;
	border-radius: 10px / 10px;
	color:#2e2d2a;
	font-size:0.8rem;
	line-height:1.8;
	display: flex;
	flex-direction: row;
}
.col_3_tb1{
	font-size:1.3rem;
	line-height:1.6;
	text-align:left;
	margin-bottom:0.5rem;
	font-family: source-han-sans-cjk-ja, sans-serif;
	font-weight: 900;
	font-style: normal;
}
.col_3_tb2{
	font-size:1rem;
	line-height:1.6;
	text-align:left;
}
.col_3_text {
  text-align: left;
  margin-left:1rem;
  width:75%;
}
.col_3_pict{
	width:25%;
	height:auto;
	margin:auto;
	margin-left: 0;
	display:block;
}
.col_3_pict img {
  width: 100%;
  height:auto;
  margin-bottom:0;
}
}
/* テーブル */
.tbl-ts {
  border-collapse: collapse;
  width: 100%;
  max-width: 700px;
}
.tbl-ts th, .tbl-ts td {
  border-bottom: 2px solid #c1c7c6;
  padding: 1em;
}
.tbl-ts th {
  border-bottom: 2px solid #2c2e3a;
  font-weight: bold;
  text-align: center;
  width: 20%;
  min-width: 4em;
}
@media only screen and (max-width: 768px) {
.tbl-ts {
  width: 90%;
}
.tbl-ts th {
  width: 30%;
}
}
/* 余白 */
.mgt50{margin-top:50px;}
/*  TOP戻るボタン
---------------------------------------------------------- */
#page_top{
  width: 90px;
  height: 90px;
  position: fixed;
  right: 0;
  bottom: 40px;
  opacity: 0.6;
}
#page_top a{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'FontAwesome';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #2E2D2A;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #2E2D2A;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
/*フッター
---------------------------------------------------------- */
div#footer{
	background-color: #2c2e3a;
	text-align: center;
	font-size: 88%;
}
.copyright{
	line-height: 140%;
	padding: 20px 10px;
	color: #fff;
	font-size: 80%;
}
/*固定フッター*/
.footer {
	text-align: center;
	}
/*フッターアコーディオン
---------------------------------------------------------- */
.footer-accordion{
    width:100%;
    min-width:270px;
	padding: 20px 0px 0px 0px;
    margin: 0 auto;
}
.footer-accordion a{
	color: #FFFFFF;
	background-image: none;
	text-decoration: none;
}
.footer-accordion a:hover{
	color: #FFC000;
}
.footer-accordion ul li{
    overflow: hidden;
}
.footer-accordion ul li:first-child{
    border-top:none;
}
.footer-accordion ul li > a{
    display: block;
	position: relative;
}
.footer-accordion ul li > a:hover{
    color: #FFC000;
}

.footer-accordion ul li.footer-open > a{
    color: #FFFFFF;
}
.footer-accordion ul li.footer-open > a:hover{
    color: #FFC000;
}
.footer-content{
    padding: 10px 0px 0px 0px;
}
.footer-content p{
    font-size:  16px;
    line-height:  28px;
    padding: 0px 4px 15px 4px; 
}
@media screen and (max-width: 320px){
	.footer-accordion ul li > a{
		font-size:36px;
	}
}