@charset "utf-8";
/* CSS Document */

body {
  margin: 0;
  padding: 0;
  background: #fff;

  font-size: 62.5%;
  line-height: 1.8;

  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;

  color: var(--const_font-_color);
}
body.menu-open {
    overflow: hidden;
}
/* =======================================================================

	共通

======================================================================== */
p {
  margin: 0 0 20px 0;
  font-style: normal;
}

strong {
  font-weight: bold;
}

span.small {
  font-size: 80%;
}

:root {
  --const_markerUnder_orange: #ffd290;
  --const_markerUnder_blue: #a0d8ef;
  --const_markerUnder_yellow: #fef263;
  --const_font_color: #333;
  --const_font_color2: #274a78;
	--const_back_odd_color : #f7f2e9;
	--const_a_color : #007fb8;
	--const_a_over_color : #00a0e9;
}
/* マーカー */
.markerUnder {
  background: linear-gradient(
    transparent 60%,
    var(--const_markerUnder_orange) 0%
  );
  display: inline;
  padding: 0 1px 0px;
}
.markerUnder_blue {
  background: linear-gradient(
    transparent 60%,
    var(--const_markerUnder_blue) 0%
  );
  display: inline;
  padding: 0 1px 0px;
}
.markerUnder_yellow {
  background: linear-gradient(
    transparent 60%,
    var(--const_markerUnder_yellow) 0%
  );
  display: inline;
  padding: 0 1px 0px;
}

/*明朝体にしたい時
--------------------------------------------------------------*/
.font-mintyo {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
/*細字にしたい時
--------------------------------------------------------------*/
.font-hosoji {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

/*テキストの色
--------------------------------------------------------------*/
/*  藍色 */
.textcolor01 {
  color: #274a78;
}

/*アンカー
--------------------------------------------------------------*/
a {
  color: var(--const_a_color);
}
a:hover {
  color: var(--const_a_over_color);
}

a:hover img {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -ms-filter: "alpha( opacity=60 )";
}

/*画像
--------------------------------------------------------------*/
img {
  border: 0;
  max-width: 100%;
  height: auto;
}

/* ●のリスト
--------------------------------------------------------------*/
ul.list01 {
  margin: 0;
  padding: 0;
}
ul.list01 li {
  text-align: left;
  margin-left: 30px;
  padding-left: 15px;
  padding: 0 20px 10px 0px;
  /*background : url(../images/list_01.png) 0 0 no-repeat;*/
}
ul.list01 li:last-child {
  padding-bottom: 0;
}


/* リストボックスの二分割
--------------------------------------------------------------*/
ul.ul_block2 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}
ul.ul_block2 li {
  width: 48%;
  text-align: left;
}
ul.ul_block2 li div.inbox {
  margin: 0 auto;
}
@media only screen and (max-width: 640px) {
  ul.ul_block2 {
    display: block;
  }
  ul.ul_block2 li {
    width: 100%;
		margin-bottom : 20px;
  }
	ul.ul_block2 li:last-child {
		margin : 0;
	}		
}

/* リストボックスの三分割
--------------------------------------------------------------*/
ul.ul_block3 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}
ul.ul_block3 li {
  width: 30%;
  text-align: left;
}
ul.ul_block3 li div.inbox {
  margin: 0 auto;
}
@media only screen and (max-width: 640px) {
  ul.ul_block3 {
    display: block;
  }
  ul.ul_block3 li {
    width: 100%;
		margin-bottom : 20px;
  }
	ul.ul_block2 li:last-child {
		margin : 0;
	}		
}

/* 見出しつきリスト
--------------------------------------------------------------*/
dl.dl01 {
  text-align: left;
}
dl.dl01 dt {
  font-weight: bold;
}
dl.dl01 dd {
  padding: 0 0 0 1em;
  margin: 0 0 20px 0;
  border-bottom: 1px dashed #b5b5b5;
}

/*クリアフィックス
--------------------------------------------------------------*/
.clear {
  clear: both;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  display: inline-table;
}
/* Hides from IE-mac \*/
* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}
/* End hide from IE-mac */

/*ボタン
--------------------------------------------------------------*/
.button-32 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 250px;
  margin: 0 auto;
  padding: 0.9em 2em;
  overflow: hidden;
  border: 1px solid #2589d0;
  border-radius: 5px;
  background: #fff;
  color: #2589d0;
  font-size: 1em;
  cursor: pointer;
  z-index: 1;
  transition: color 0.3s ease;
}

.button-32 span {
  position: relative;
  z-index: 5;
}

.button-32::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 0;
  background: #2589d0;
  transform: translate(-50%, -50%) rotate(-30deg);
  z-index: 1;
  transition: height 0.3s ease;
}

.button-32:hover {
  color: #fff !important;
}

.button-32:hover::before {
  height: 350%;
}
/* =======================================================================

	グローバルナビゲーション

======================================================================== */
div#sma_menu {
  display: inline;
  position: fixed;
  top: 14px;
  left: 17px;
  z-index: 100;
}
#slide_menu1 {
  display: inline;
}

/* =======================================================================

	見出し

======================================================================== */
h1 {
  display: none;
}
h2 {
  font-size: 2.6rem;
  letter-spacing: 1px;
  font-weight: 530;
  margin: 0 0 20px 0;
  line-height: 1.4;
  color: var(--const_font_color2);
  text-align: center;
}
h2.img {
  font-size: 0;
}
h3 {
  font-size: 2rem;
  text-align: center;
  margin: 0 0 30px 0;
  font-weight: normal;
  line-height: 1.4;
  color: var(--const_font_color2);
}
h3 span::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
	left: -40px;
  margin: auto;
  width: 30px;
  height: 2px;
  background: var(--const_font_color2);
}
h3 span::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
	right : -40px;
  margin: auto;
  width: 30px;
  height: 2px;
  background: var(--const_font_color2);
}
h3 span {
  padding: 0;
  box-sizing: border-box;
	  position: relative;
}
h4 {
  font-size: 1.3rem;
  margin: 0;
  line-height: 1.4;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  h2 {
    font-size: 2.4rem;
  }
  h3 {
    font-size: 1.8rem;
  }
}
@media only screen and (max-width: 640px) {
  h2 {
    font-size: 2.2rem;
  }
  h3 {
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 480px) {
  h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.5rem;
  }
}
/* =======================================================================

	次のコンテンツへいくための矢印

======================================================================== */
.next {
  position: relative;
}
.next a::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);
  animation: arrow 1.5s infinite;
}
.next a.black::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
  transform: translate(-50%, -50%) rotate(45deg);
  animation: arrow 1.5s infinite;
}

@keyframes arrow {
  0% {
    transform: translate(-50%, -60%) rotate(45deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -20%) rotate(45deg);
    opacity: 0;
  }
}

/* =======================================================================

	レイアウト

======================================================================== */

div.wrapper {
  margin: 0 auto;
  width: 1200px;
  text-align: center;
  padding: 60px 0;
	font-size : 1.1rem;	
}
@media only screen and (max-width: 1200px) {
  div.wrapper {
    width: 96%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 768px) {
  div.wrapper {
    padding: 50px 0;
  }
}
@media only screen and (max-width: 640px) {
  div.wrapper {
    padding: 40px 0;
  }
}
br.kaigyou {
  display: none;
}
@media only screen and (max-width: 640px) {
  br.kaigyou {
    display: inline;
  }
}
/* =======================================================================

	全体の大枠
	
======================================================================== */
#container {
  width: 100%;
  text-align: center;
  position: relative;
  font-size: 1.1rem;
}
section:nth-child(odd){
  color: var(--const_font_color2);
  background: var(--const_back_odd_color);
}
/* =======================================================================

	ヘッダー
	
======================================================================== */
header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;

  /* opacity: 0; */
  /* visibility: hidden; */
  transition: 0.3s;

	box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
/*ヘッダーの内側
--------------------------------------------------------------*/
header #header_in {
  height: 70px;
  position: relative;
  background-color: rgba(255,255,255,0.8);
}
header div.wrapper {
	padding : 0 !important;
	position: relative;

	display: flex;
	align-items: center;
	justify-content: space-between;
	height : 100%;
}
@media only screen and (max-width: 640px) {
  header div.wrapper {
  width : 100%;
  }  
}

.scroll_in {
  /* opacity: 1; */
  /* visibility: visible; */
}
header.scroll_in  #header_in {
  background : #fff;
}
/*ロゴ
--------------------------------------------------------------*/
header div.h_logo{
flex-shrink: 0;
}
header div.h_logo a{
	display: flex;
	align-items: center;
	font-size: 1.4rem;
	line-height : 1;
	color : var(--const_font_color2);
	text-decoration: none;
}
header div.h_logo a img{
	width : 45px;
	height : auto;
	margin-right : 5px;
}
header div.h_logo a:hover img{
	opacity: 1;
}
header div.h_logo div.h_meisyou{
	padding-left : 5px;
	box-sizing : border-box;
}
/*メニューボックス
--------------------------------------------------------------*/
div.menu_box{
	line-height : 1;
	padding-right : 10px;
	box-sizing: border-box;
}
/*PCメニュー
--------------------------------------------------------------*/
div.pc_menu{
	
}
div.pc_menu a{
	text-decoration: none;
	color : var(--const_font_color2);
	transition: width .4s cubic-bezier(.4,0,.2,1);
	position: relative;
}	
div.pc_menu a:hover{
	color : var(--const_a_over_color);
}
div.pc_menu a::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -4px;

    width: 0;
    height: 1px;

    background: var(--const_a_over_color);

    transform: translateX(-50%);
    transition: width .3s ease;
}

div.pc_menu a:hover{
    color: var(--const_a_over_color);
}

div.pc_menu a:hover::after{
    width: 100%;
}
div.pc_menu ul.ul_pc_menu{
	display: flex;
	justify-content :flex-end;
	list-style: none;
	margin : 0;
	padding : 0;
}
div.pc_menu ul.ul_pc_menu li{
	margin : 0 0 0 15px;
}

@media only screen and (max-width: 640px) {
	div.pc_menu{
		display: none;
	}
}

/*SPメニュー
--------------------------------------------------------------*/
div.sp_menu{
	display: none;
	width : 150px;
}
@media only screen and (max-width: 640px) {
	div.sp_menu{
		display: inherit;
	}
}

.menu-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    height: 50px;
    width: 50px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    /* background-color: #fff; */
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: var(--const_font_color2);
    position: absolute;
		transition: .3s ease;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}

/* 三本線を×にする */
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
/*チェックボックスを隠す*/
#menu-btn-check {
    display: none;
}

/* スマホの実際のメニュー */
.menu-content {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all .3s ease;
	z-index: 80;
	background: rgba(255,255,255,.95);
	backdrop-filter: blur(10px);
}
#menu-btn-check:checked ~ .menu-content {
    /* left: 0; *//*メニューを画面内へ*/
	opacity: 1;
	visibility: visible;
	transform: translateY(0);		
}
.menu-label {
    margin: 110px 0 24px;
    text-align: center;
    color: #1f4168;
    font-size: 12px;
    letter-spacing: .25em;
}
.menu-content ul {
	width: min(82%, 360px);
	margin: 0 auto;
	padding: 0;
}
.menu-content ul li {
    list-style: none;
    border-bottom: 1px solid rgba(26,58,96,.18);		
}
.menu-content ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 6px;
    color: #1f4168;
    font-size: 16px;
    letter-spacing: .08em;
    text-decoration: none;
}
.menu-content ul li a::after {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 1px solid #1f4168;
    border-right: 1px solid #1f4168;
    transform: rotate(45deg);
    margin-left: 20px;
}
.menu-content ul li a::before {
    content: none;
}

/* =======================================================================

	1枚目 スライド
	
======================================================================== */
#intro {
  color: white;
  margin: 0 auto;
  padding: 0;
  text-align: center;

  position: relative;
}

#intro div#mainimg_box {
}

#intro div#mainimg_box div#mainimg {
}
#intro div#mainimg_box div#slide_print {
  display: none;
}

/* スライド
----------------------------------------------------------*/
div#mainimg_box {
  width: 100%;
}
@media print {
  div#mainimg_box {
    padding-bottom: 100px;
  }
}
div#mainimg_box div#mainimg {
  width: 100%;
  height: 100vh;
  min-height: 900px;
  position: relative;
}
@media only screen and (max-width: 640px) {
  div#mainimg_box div#mainimg {
    height: 70vh;
    min-height: 550px;
  }
}
@media print {
  div#mainimg_box div#mainimg {
    width: 100%;
    height: 420px !important;
  }
}
div#mainimg_box div#mainimg .swiper-container,
div#mainimg_box div#mainimg .swiper-wrapper,
div#mainimg_box div#mainimg .swiper-slide,
div#mainimg_box div#mainimg .inbox {
  width: 100%;
  height: 100%;
}
div#mainimg_box div#mainimg .swiper-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

@media only screen and (max-width: 1200px) {
  div#mainimg_box div#mainimg .swiper-slide img {
    border-radius: 5px 0 0 5px;
  }
}

/* ページネーションを〇から□へ変更する */
div#mainimg_box div#mainimg .swiper-pagination-bullet {
  width: 20px;
  height: 3px; /*高さも変えられる*/
  border-radius: 0;
}

div#mainimg_box div#mainimg .swiper-horizontal > .swiper-pagination-bullets,
div#mainimg_box
  div#mainimg
  .swiper-pagination-bullets.div#mainimg_box
  div#mainimg
  swiper-pagination-horizontal,
div#mainimg_box div#mainimg .swiper-pagination-custom,
div#mainimg_box div#mainimg .swiper-pagination-fraction {
  bottom: var(0, 8px);
  top: var(0, auto);
  left: 0;
  width: 100%;
}
div#mainimg_box div#mainimg .swiper-pagination-bullet-active {
  background: rgba(255, 255, 255, 0.5) !important;
}

/* 印刷用の枠（swiperは印刷ができないので別に用意し、JSでセットする）
---------------------------------------------------------*/
div#mainimg_box div#mainimg div#slide_print {
  display: none;
}
@media print {
  div#mainimg_box div#mainimg div.slider,
  div#mainimg_box div#mainimg .swiper-pagination {
    display: none;
  }
  div#mainimg_box div#mainimg div#slide_print {
    display: inherit;
    position: relative;
    height: 420px;
  }
  div#mainimg_box div#mainimg div#slide_print img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 5px 0 0 5px;
  }
}

/*スライドショーの上に乗せるメッセージ
--------------------------------------------------------------*/
#intro div#msg_box {
  position: absolute;
	width : 100%;
  z-index: 2;
}


/*キャッチコピー１
----------------------------------------------------*/
#intro div#msg_box div.catch_01 {
  font-size: 3rem;
  line-height: 1.4;
  text-shadow:
    0 0 10px #333,
    0 0 10px #333;
  margin: 150px 0 30px 0;
}
@media only screen and (max-width: 768px) {
  #intro div#msg_box div.catch_01 {
    font-size: 2.5rem;
  }
}
@media only screen and (max-width: 640px) {
  #intro div#msg_box div.catch_01 {
    margin-top: 100px;
    font-size: 1.8rem;
  }
}
@media only screen and (max-width: 480px) {
  #intro div#msg_box div.catch_01 {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 390px) {
  #intro div#msg_box div.catch_01 {
    font-size: 1.3rem;
  }
}
/*キャッチコピー２
----------------------------------------------------*/
#intro div#msg_box div.catch_02 {
  font-size: 1.5rem;
  line-height: 1.4;
  text-shadow:
    0 0 10px #333,
    0 0 10px #333;
  margin-bottom: 30px;
}
@media only screen and (max-width: 768px) {
  #intro div#msg_box div.catch_02 {
    font-size: 1.3rem;
  }
}
@media only screen and (max-width: 640px) {
  #intro div#msg_box div.catch_02 {
    font-size: 1.1rem;
  }
}
@media only screen and (max-width: 390px) {
  #intro div#msg_box div.catch_02 {
    font-size: 1rem;
  }
}
/*ロゴ
----------------------------------------------------*/
#intro div#msg_box div.logo {
  width: 300px;
  margin: 20px auto;
}
@media only screen and (max-width: 768px) {
  #intro div#msg_box div.logo {
    width: 250px;
  }
}
@media only screen and (max-width: 640px) {
  #intro div#msg_box div.logo {
    width: 200px;
  }
}
@media only screen and (max-width: 480px) {
  #intro div#msg_box div.logo {
    width: 180px;
  }
}

#intro div.intoro_next{
  height: 100px;
  width: 100px;
  left : 0;
  right : 0;
  position: absolute;
  bottom : 0px;
  z-index: 2;  
  margin : auto;
}

/* =======================================================================

	メッセージ

======================================================================== */
#message div.msg{
}
@media only screen and (max-width: 480px) {
	#message div.msg{
		text-align:left;
	}
	#message div.msg br.none{
		display : none;
	}
}
/* =======================================================================

	２枚目

======================================================================== */
#second {
  margin: 0 auto;
  overflow: hidden;
}
#second div.wrapper div.msg{
	margin-bottom : 30px;	
}
ul.ul_tokutyou{
	margin-bottom : 40px;
}
@media only screen and (max-width: 640px) {
	ul.ul_tokutyou{
		margin-bottom : 20px;
	}
}	
ul.ul_tokutyou li{
	background : rgba(255,255,255,0.3);
	padding : 0 15px 15px 15px;
	box-sizing: border-box;
}
ul.ul_tokutyou li p{
	margin : 0;
}	
@media only screen and (max-width: 640px) {
  #second div.wrapper div.msg {
    text-align: left;
  }

	ul.ul_tokutyou div.photo{
		max-width : 300px;
		margin : 0 auto;
	}
}

/* =======================================================================

	会社案内

======================================================================== */
#company ul.ul_corp{
	margin-bottom : 40px;
}
@media only screen and (max-width: 640px) {
	#company ul.ul_corp{
		margin-bottom : 20px;
	}
}	
#company .companyleft {
  text-align: left;
}
#company .companyleft dl {
  border-top: 5px solid var(--const_font_color2);
  border-bottom: 5px solid var(--const_font_color2);
  padding: 10px 0;
  margin-top: 0;
}
#company .companyleft dt {
  float: left;
  clear: both;
  width: 130px;
  border-top: 1px dashed var(--const_font_color2);
  padding: 10px 0 10px 0;
  margin-left: 15px;
}
#company .companyleft dl dt:first-child {
  border-top: none;
}
#company .companyleft dd {
  margin-left: 145px;
  border-top: 1px dashed var(--const_font_color2);
  padding: 10px 0 10px 0;
  margin-right: 15px;
}
#company .companyleft dl dt:first-child + dd {
  border-top: none;
}
#company .companyright {
  text-align: left;
}
#company .companyright .googlemap {
  position: relative;
  padding-bottom: 80%; /* これが縦横比 */
  height: 0;
  overflow: hidden;
  border: 1px solid #ccc;
	margin : 0 0 1.5em 0;
}
#company .companyright .googlemap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/* スマートフォン 縦(ポートレート) */
@media only screen and (max-width: 480px) {
  #company .companyleft dl {
    padding: 0px 0;
  }
  #company .companyleft dt {
    float: none;
    clear: both;
    width: 100%;
    border-top: 1px dashed var(--const_font_color2);
    padding: 10px 0 0px 0;
    margin-left: 15px;
    font-weight: bold;
  }
  #company .companyleft dd {
    margin-left: 15px;
    border-top: 0px dashed var(--const_font_color2);
    padding: 0px 0 10px 0;
    margin-right: 15px;
  }
}
#company ul.ul_jigyou li{
  margin : 0;
}
/* =======================================================================

	フッター直前のお問い合わせ

======================================================================== */
#contact {
  box-sizing: border-box;
}
#contact div.cta_tel{
	padding-bottom : 20px;
}	
#contact div.cta_tel a {
  font-size: 2rem;
}
@media screen and (min-width: 768px) {
  .tel_link {
    pointer-events: none;
    text-decoration: none;
    color: inherit;
    cursor: default;
  }
}
#contact div.c_logo{
  width : 150px;
  margin : 0 auto;
}  
/* =======================================================================

	フッター
	
======================================================================== */
#footer {
  background: var(--const_font_color2);
  color: #fff;
  text-align: center;
  height: 90px;
  line-height: 90px;
  font-size: 0.9rem;
}

/* =======================================================================

	ページの先頭へ戻る
	
======================================================================== */
#page-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  margin: 0;
}

#page-top a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: #333;
  text-decoration: none;
}

#page-top a::before {
  content: "";
  width: 14px;
  height: 14px;
  border-top: 3px solid #fff;
  border-left: 3px solid #fff;
  transform: rotate(45deg);
  margin-top: 6px;
}

#page-top span {
  display: none;
}