@charset "UTF-8";

:root {
  /* Primary Theme */
  --skyblue: #16c3f3;         /* Sky Blue */
  --primary-color-rgba: rgba(22, 195, 243, 1);

  /* Secondary Theme */
  --navy: #3a688e;       /* Midnight Navy */
  --secondary-color-rgba: rgba(58, 104, 142, 1);

  --icegray: #E8EFF7;   /* Ice Gray */
  --secondary-alt-color-rgba: rgba(245, 247, 249, 1);

  --warmgray: #e3e3e1; /* Warm Gray */
  --secondary-neutral-color-rgba: rgba(227, 227, 225, 1);

  /* Accent Colors */
  --amber: #f5a623;          /* Amber */
  --accent-color-rgba: rgba(245, 166, 35, 1);

  --accent-success-color: #4caf50;  /* Leaf Green */
  --accent-success-color-rgba: rgba(76, 175, 80, 1);

  --gold: #bfa54a; /* Antique Gold */
  --accent-highlight-color-rgba: rgba(191, 165, 74, 1);

  /* Text */
  --text-color: #333333;            /* Charcoal */
  --text-color-rgba: rgba(51, 51, 51, 1);
  /* 欧文 */
  --obun: "EB Garamond", serif;

}

/*================================================
 *  CSSリセット
 ================================================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

img{
	width: 100%;
	vertical-align:bottom; /* img要素にここを指定 */
}

a:link {
	text-decoration: none;	
}

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




/*================================================
 *  一般・共通設定
 ================================================*/

body {font-family: 'Noto Serif JP', serif;
	color: #3a3a3a;
    color: var(--text-color);
	line-height: 1.8;
	word-wrap: break-word;
    font-size: 100%;
    font-weight: 500; /* ほんの少し太く */}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
body {font-size: 88%;}
	}
/* -------------end------------- */



/*================================================
 *  リンクスタイル
 ================================================*/
a:hover {
	opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}


/*================================================
 *  ヘッダー
 ================================================*/
.header {
	box-sizing: border-box;
	width: 100%;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;}




/* 大きい画面用の設定-------------- */
@media (min-width:1001px){

#top .header_outside{
z-index: 10000;
background-color: transparent;
position: absolute;
top:20px;
left: 0;
width: 100%!important;
}
    
.header{
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
    
.header_list{
    display: flex;
    justify-content: space-between;
    color: #ffffff;
}
    

.header_list > li:first-child{
width: 40%;
max-width: 400px;
    }
    
.header_list > li:last-child{
width: 75%;
}
    
.header_list > li:last-child a{
color: #ffffff;
}

.header_onlypc {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  line-height: 1.0;
  margin-bottom: 10px;
  gap: 1.5em; /* 要素間のスペース調整にgapを使うと管理しやすい */
}

.header_tel,
.header_mail {
  display: flex;
  align-items: center; /* アイコンとテキストを縦中央揃え */
  font-weight: 500;
}

.header_tel {
  font-size: 200%;
    font-family: var(--obun);

}

.header_mail {
  font-size: 113%;
}



.header_tel:before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f095"; /* 電話アイコン */
  font-size: 24px;
  margin-right: 0.3em;
  display: inline-block;
}

.header_mail:before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f0e0"; /* メールアイコン */
  font-size: 24px;
  margin-right: 0.3em;
  display: inline-block;
}


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



/* 下層ヘッダー大きい画面用の設定-------------- */
@media (min-width:1000px){
#inside .header_outside{
z-index: 10000;
width: 100%!important;
background-color:var(--navy);
padding-top: 10px;
padding-bottom: 10px;
}
}

/* -------------end------------- */




/* 小さい画面用の設定-------------- */
@media (max-width:1000px){
#inside .header_outside{
z-index: 99999;
width: 100%;
background-color:var(--navy);}


#top .header_outside{
z-index: 10000;
background-color: transparent;
position: absolute;
top:3px;
left: 0;
width: 100%!important;
}
    
.header {
	padding-top: 20px;
	padding-bottom: 20px;
    padding-left: 20px;}
	
#inside .header {
	padding-top: 10px;
	padding-bottom: 10px;}
	

.header_list > li:first-child{
width: 70%;
 }
    



}
/* -------------end------------- */
/* 小さい画面用の設定-------------- */
@media (max-width:767px){

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



/*================================================
 * グロナビ固定
 ================================================*/
@media screen and (min-width:1001px) {
.nav_fixed {
		position:fixed;
		top:0;
		left:0;
z-index: 10000;
}
    
#top .nav_fixed .header_outside,
#inside .nav_fixed .header_outside{
top: 0;
/*background-color: rgba(255,255,255,0.5);*/
background-color: var(--navy);
}

.nav_fixed .header_onlypc{display: none;}

    
.nav_fixed .header_list > li:first-child{
max-width: 220px;
}
    
.nav_fixed .header{
top:0px;
padding-top: 10px;
padding-bottom: 10px;
}
 
.nav_fixed .header_list{
align-items: center;
}

    
.nav_fixed .header_list > li:first-child{
color: #ffffff;
    }
.nav_fixed .header_list > li:last-child a{
color: #ffffff;
}

#inside .nav_fixed .header_outside{
padding-top: 0px;
padding-bottom: 0px;
}
    
}

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

    ■ Header■ Keyv

======================================== */
.slider_wrap{position: relative;}

.slider {
  width: 100%;
  height: 100vh; /* 全画面の高さに変更 */
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  padding: 0;
  margin: 0;}



/* スライド画像背景 */
.slider-img {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;/* 全体にフィット */
  background-position: center;
  width: 100%;
  height: 100vh;/* 全画面の高さに変更 */
}

/* スライダー画像を指定 */
.slider-img-01 {
  background-image: url("../img/index_img/top_001.jpg");
}
.slider-img-02 {
  background-image: url("../img/index_img/top_002.jpg");
}
.slider-img-03 {
  background-image: url("../img/index_img/top_003.jpg");
}
.slider-img-04 {
  background-image: url("../img/index_img/top_004.jpg");
}



.slick-list {
  width: 100%;
}

@keyframes fadezoom {
  0% {
    transform: scale(1.1);   /* 最初は拡大状態 */
    opacity: 1;
  }
  100% {
    transform: scale(1);     /* 通常サイズに戻る（縮小） */
    opacity: 1;
  }
}


.add-zoom {
  animation: fadezoom 5s ease-in-out forwards; /* ← アニメーションを5秒に調整 */
}


/* オーバーレイ：ドット模様 */
.slider-img::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;

  z-index: 1;
  pointer-events: none;

    background-image: linear-gradient(90deg, rgba(22, 195, 243,0.7) 0%, rgba(22, 195, 243,0.7) 100%);
    /* ← シンプルな黒半透明 */
 /* background: rgba(0, 0, 0, 0.4); 
  background-image: radial-gradient(rgba(0, 0, 0, 0.4) 1px, transparent 1px);
  background-size: 4px 4px;*/

}



/* スクロールボタン */
.scroll-down {
  position: absolute;
  bottom: 20px;
  right: 20px;
  color: #ffffff;
  z-index: 100;
  text-decoration: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: bounce 2s infinite;
}

/* テキスト */
.scroll_txt {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 1.0em;
  line-height: 1.2;
  margin-bottom: 10px;
}

/* 矢印の縦線部分 */
.arrow-line {
  width: 2px;
  height: 100px;
  background-color: #fff;
  position: relative;
}

/* 矢印の先端部分 */
.arrow-head {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 16px;
  height: 16px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

/* アニメーション */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.scroll-down {
  animation: bounce 2s infinite;
}


/* キャプション（共通テキスト） */
.slider-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999 !important;
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.8);
/*  background-color: rgba(255, 0, 0, 0.2);*/
  width: 80%;
  font-weight: 600;
	line-height: 1.4;
}


.slider-caption h3 {
  font-size: 350%;
  margin: 0 0 30px;
}

.slider-caption p {
  font-size: 138%;
  margin: 0;
}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){

.slider {height: 80vh;}

.slider-img {
height: 80vh;
}

.scroll-down {
bottom: 10px;
}

.slider-caption {
  width: 90%;
}

.slider-caption h3 {
  font-size: 210%;
}

.slider-caption p {
  
}
}
/* -------------end------------- */



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

    ■ common

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

.contents{
	max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    width: 96%;}


/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.contents{
	width: 90%;
    box-sizing: border-box;
}
}
/* -------------end------------- */


/* 共通見出し ------------------------------*/

.con_title {
	position: relative;
	padding-bottom: 40px;
	text-align: center;
    color: var(--text-color);
margin-bottom: 10px;
font-weight: 600;
}


.con_title::before {
	content: attr(data-en);
	display: block;
	color: var(--skyblue);
	text-transform: uppercase;
    font-size: 188%;
    line-height: 1.6;
}

.con_title_w,
.con_title_w::before {
color: #ffffff;
}


.con_title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%) ;
	width: 2px;
	height: 30px;
	background-color: var(--warmgray);
}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.con_title {
	position: relative;
	padding-bottom: 25px;
	text-align: center;
    color: var(--text-color);
margin-bottom: 10px;
}

.con_title::before {
line-height: 1.4;}

.con_title_w,
.con_title_w::before {
color: #ffffff;
}

.con_title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%) ;
	width: 2px;
	height: 20px;
}
    
}
/* -------------end------------- */


.con_lead {
	font-size: 125%;
	text-align: center;
margin-bottom: 20px;
color: var(--skyblue);
font-weight: 600;
}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.con_lead {
line-height: 1.6;
margin-bottom: 10px;
}

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

/*================================================
 *  bt_more 
 ================================================*/
.bt_more {
  /*width: fit-content;*/
  margin: 0 auto;
  /*padding: 10px 3vw;*/
  padding: 10px 20px;
  text-align: center;
  background-color: var(--navy);
  transition: background-color 0.3s ease, transform 0.3s ease;
  box-sizing: border-box;
  width: 10em;}

.bt_more_left {
margin-left: 0;
margin-right: auto;
}

.bt_more a {
  display: block;
  text-decoration: none;
  color: #fff;
  position: relative;
  padding-right: 1.5em;
  transition: color 0.3s ease;
}

/* 矢印アイコン */
.bt_more a::after {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}

/* ホバーアニメーション */
.bt_more:hover {
  background-color: var(--skyblue); /* 少し明るく */
  transform: translateY(-2px); /* 少し浮く感じ */
}

.bt_more a:hover::after {
  transform: translate(4px, -50%); /* 矢印が右にスライド */
}



/*================================================
 *  con1 
 ================================================*/

.con1_outside {
	padding-top: 50px;
	padding-bottom: 50px;
	background-color: #ffffff;
	background-image: url(../img/index_img/con1_bg.png);
	background-position: right -180px top;
	background-size: auto 100%;
	background-repeat: no-repeat;
}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.con1_outside {
background-image: none;
	/*background-image: url(../img/index_img/con1_bg_sp.png);
	background-position: right -40px top;
	background-size: auto 32%;
	background-repeat: no-repeat;*/
}

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


/*================================================
 *  con2 
 ================================================*/

.con2_outside {
position: relative;
  padding-top: 50px;
  padding-bottom: 50px;
  z-index: 0;
}

.con2_outside::before {
content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 300px;
  width: 100%;
  background: linear-gradient(
    rgba(22, 195, 243, 0.9), 
    rgba(22, 195, 243, 0.9)
  ), 
  url("../img/index_img/top_003.jpg");
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.con2_inner {
	background-color: #ffffff;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 50px;
	padding-right: 50px;
	padding-left: 50px;
	padding-bottom: 0px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
    box-sizing: border-box;
}

.con2_flex{display: flex;
justify-content: space-between;
margin-bottom: 30px;}

.con2_flex li{width: 32%;
}

.con2_num {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 1.5em; /* お好みで */
  margin: 10px 0;    /* 上下余白 */
}

.con2_num::before,
.con2_num::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--warmgray);
}

.con2_num::before {
  margin-right: 10px;
}

.con2_num::after {
  margin-left: 10px;
}

.con2_service_title {
  color: var(--navy);
  font-size: 119%;
  font-weight: 600;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 10px;
}


/* 小さい画面用の設定-------------- */
@media (max-width:767px){

.con2_outside {
position: relative;
  padding-top: 30px;
  padding-bottom: 50px;
  z-index: 0;
}


.con2_inner {
	width: 94%;
	
	padding-top: 30px;
padding-right: 5px;
padding-left: 5px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;}
    
    .con2_flex{flex-wrap: wrap;}

.con2_flex li{width: 100%;
}

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

/*================================================
 *  con3 
 ================================================*/

.con3_outside {
position: relative;
  padding-top: 50px;
  padding-bottom: 50px;
  z-index: 0;
  background-color: var(--icegray);
}

.con3_outside::before {
content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 300px;
  width: 100%;
  background: linear-gradient(
    rgba(58, 104, 142, 0.8), 
    rgba(58, 104, 142, 0.8)
  ), 
  url("../img/index_img/top_002.jpg");
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.con3_inner {
	background-color: var(--icegray);
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 50px;
	padding-right: 50px;
	padding-left: 50px;
	padding-bottom: 0px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}

.con3_flex{display: flex;
justify-content: space-between;
margin-bottom: 30px;}

.con3_flex li:first-child{width: 30%;}

.con3_flex li:last-child{width: 66%;}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){

.con3_outside {
position: relative;
  padding-top: 30px;
  padding-bottom: 50px;
  z-index: 0;
}


.con3_inner {
width: 94%;
padding-top: 30px;
padding-right: 5px;
padding-left: 5px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;}


.con3_flex{flex-wrap: wrap;}

.con3_flex li:first-child{width: 100%;
margin-bottom: 20px;
}
.con3_flex li:last-child{width: 100%;}
}
/* -------------end------------- */

.con3_txt_box{
padding-bottom: 20px;
 position: relative; /* 擬似要素を相対配置するために必要 */
}

.con3_txt_box::after {
  content: ""; /* 擬似要素を表示させるために必須 */
  display: block; 
  width: 30%; /* 線の横幅を30％に指定 */
  height: 1px; /* 線の太さ */
  background-color: #cccccc; /* 線の色 */
  margin: 0 auto; /* 中央に配置 */
  margin-top: 20px; /* 本体との間隔 */
}

/*================================================
 *  con4 
 ================================================*/

.con4_outside {
padding-top: 50px;
padding-bottom: 50px;
background-color: #ffffff;
}

.con4_inner{margin-bottom: 30px;}

/* Q&A
---------------------------------------------------------------------------*/
/* Chrome、Safari以外 */
summary {
  display: block;

}

/* Chrome、Safari */
summary::-webkit-details-marker {
  display: none;
}

.qa-case {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 1px solid #cccccc;
}

.qa-case summary {
display: flex;
align-items: center;
position: relative;
padding: 1em 1.5em 1em 1.5em;
cursor: pointer;
justify-content: space-between;
}



.qa-case summary::before,
.qa-case p::before {
    position: absolute;
    left: .5em;
    font-weight: 600;
}

.qa-case summary::before {
content: "Q";
color: var(--skyblue);
}

.qa-case summary::after {
    position: absolute;
    right: 1em; /* 右端に固定 */
    transform: translateY(-50%) rotate(45deg);
    width: 7px;
    height: 7px;
    border-bottom: 3px solid #cccccc;
    border-right: 3px solid #cccccc;
    content: '';
    transition: transform .5s;
}

.qa-case[open] summary::after {
    transform: rotate(225deg);
}

.qa-case p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding-top: .3em;
    padding-left: 1.5em;
    padding-bottom: 1.5em;
    transition: transform .5s, opacity .5s;
}

.qa-case[open] p {
    transform: none;
    opacity: 1;
    
}

.qa-case p::before {
    color: var(--skyblue);
    content: "A";
}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.qa-case {
    max-width: 100%;
}
}
/* -------------end------------- */



/*================================================
 *  con5 
 ================================================*/
.con5_outside {
position: relative;
  padding-top: 50px;
  padding-bottom: 50px;
  z-index: 0;
  background-color: var(--icegray);
}

.con5_outside::before {
content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 300px;
  width: 100%;
   background: linear-gradient(
    rgba(22, 195, 243, 0.9), 
    rgba(22, 195, 243, 0.9)
  ), 
  url("../img/index_img/top_001.jpg");
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.con5_inner {
	background-color: var(--icegray);
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 50px;
	padding-right: 50px;
	padding-left: 50px;
	padding-bottom: 0px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}

.access_logo{width: 40%;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;}

.access_flex_box{display: flex;
justify-content: space-between;
width: 60%;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-bottom: 30px;}

.access_flex_box li{display: flex;
align-items: center;
justify-content: center;}



.access_flex_box li:first-child{width: 50%;
    background-color: var(--skyblue);
    padding-top: 10px;
padding-bottom: 10px;
      color: #ffffff;}

.access_flex_box li:last-child{width: 50%;
    background-color: var(--navy);
    padding-top: 10px;
padding-bottom: 10px;
    color: #ffffff;}

.access_flex_box li a
{display: block;
color: #ffffff;
width: 100%;
height: 100%;
display: flex;
align-items: center;
flex-flow: column;
justify-content: center;}

.access_flex_tel{
font-size: 175%;
font-weight: 600;
line-height: 1.0;
font-family: var(--obun);
}

.access_flex_tel:before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f095";
font-size: 90%;
margin-right: .2em;}

.access_flex_mail{
font-size: 125%;
font-weight: 600;
}

.access_flex_mail:before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f0e0";
font-size: 90%;
margin-right: .2em;}

/*.access_dl {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}*/

.access_dl dt {
	padding-left: 1em;
	clear: left;
	float: left;
	width: 7em;
}

.access_dl dd {
	padding-left: 8em;
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCC;
}


/* 小さい画面用の設定-------------- */
@media (max-width:767px){

.con5_outside {
position: relative;
  padding-top: 30px;
  padding-bottom: 50px;
  z-index: 0;
}


.con5_inner {
width: 94%;
padding-top: 30px;
padding-right: 5px;
padding-left: 5px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;}


.access_flex_box{font-size: 88%;}

.access_logo{width: 80%;
}

.access_flex_box{width: 100%;}

.access_flex_tel{
font-size: 125%;

}



.access_flex_mail{
font-size: 107%;
}

.access_dl dt {
	padding-left: 0em;
	clear: left;
	float: left;
	width: 5em;
}

.access_dl dd {
	padding-left: 6em;
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCC;
}



}

/* -------------end------------- */
/*================================================
 *  con6 
 ================================================*/

.con6_outside {

  padding-top: 50px;
  padding-bottom: 50px;
    background: linear-gradient(
    rgba(58, 104, 142, 0.8), 
    rgba(58, 104, 142, 0.8)
  ), 
  url("../img/index_img/con6_bg.jpg");
  background-size: cover;
  background-position: center;
  z-index: -1;

}

.con6_txt{text-align: center;
color: #ffffff;
margin-bottom: 20px;}

.con6_flex{display: flex;
justify-content: space-between;
width: 60%;
margin-left: auto;
margin-right: auto;
}

.con6_flex li{width: 48%;

  padding: 10px 3vw;
  text-align: center;
  background-color: #ffffff;
  transition: background-color 0.3s ease, transform 0.3s ease;
  box-sizing: border-box;
  
}

.con6_flex li a{ display: block;
  text-decoration: none;
  color: var(--navy);
  position: relative;
  padding-right: 1.5em;
  transition: color 0.3s ease;
}
/* 矢印アイコン */
.con6_flex li a::after {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}

/* ホバーアニメーション */
.con6_flex li:hover {
  background-color: rgba(255,255,255,0.7); /* 少し明るく */
  transform: translateY(-2px); /* 少し浮く感じ */
}

.con6_flex li a:hover::after {
  transform: translate(4px, -50%); /* 矢印が右にスライド */
}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.con6_txt{text-align: left;}

.con6_flex{width: 100%;
}

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

/*================================================
 *  footer
 ================================================*/
.footer_outside{
    background-color: var(--icegray);
    padding-top: 20px;
	padding-bottom: 50px;
    position: relative;
}

.footer{
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	width: 96%;}
    
        
.footer_flex{
display: flex;
justify-content: space-between;
margin-bottom: 10px;
flex-wrap: wrap;
	}
    
.footer_flex > li{
width: 100%;
	}


.footer_links{display: flex;
justify-content: flex-start;
margin-bottom: 30px;}

.footer_links > li{
font-size: 80%;}

.footer_links > li::after{
	content:"｜";
	padding-right: 5px;
	padding-left: 5px;
}

.footer_links > li:last-child::after{
	content:"";
	padding-right: 0px;
	padding-left: 0px;
}

.footer_links a{color: var(--text-color);}

.footer_logo{width: 40%;
max-width: 400px;
margin-bottom: 10px;
}


/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.footer_outside{
	padding-bottom: 70px;
}

 .footer{
width: 90%;
	}
    
.footer_flex{
margin-bottom: 30px;}
    
.footer_links{flex-wrap: wrap;
margin-bottom: 10px;}
    
.footer_links > li{
width: 100%;}
    
.footer_links > li::after,
.footer_links > li:last-child::after{
content: "\f105"; 
font-family: "Font Awesome 5 Free"; 
font-weight: 900; 
padding-right: 0px;
padding-left: 0.5em;
}

.footer_logo{width: 80%;

}

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




/*================================================
 *  COPY
 ================================================*/
address{
	font-size: 65%;
    font-family: var(--obun);
    font-weight: 400;
}


/* 小さい画面用の設定-------------- */
@media (max-width:767px){
address{
font-size: 50%;
}
}
/* -------------end------------- */



/* ====================================================
　pagetop
==================================================== */

.pagetop {
    display: none;
    position: fixed;
    bottom: 5px;
    right: 15px;
	z-index: 1000;
}
.pagetop a {
    display: block;
   color: var(--navy);
    font-size: 300%;
    
}
.pagetop a:hover {
display: block;}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.pagetop {

     bottom: 3px;
    right: 10px;
    
}
    
.pagetop a {font-size: 200%;}

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


/* ====================================================
　page_btm_fixed
==================================================== */
#page_btm_fixed{
position: fixed;
right: 100px;
z-index: 9999999999;}

.page_btm_fixed_flex{
justify-content: flex-end;
width: 40%;}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
#page_btm_fixed{
left: 0px;}

.page_btm_fixed_flex{
justify-content: flex-start;
width: 88%;}
    


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



/* ====================================================
　改行位置
==================================================== */
@media print, screen and (min-width: 768px) {
br.sp { display: none; }
br.pc { display: inline; }
}
@media screen and (max-width: 767px) {
br.sp { display: inline; }
br.pc { display: none; }
}


/* PC向けレイアウトの指定：961px以上では固定レイアウト */
.miniimage { display: none; }  /* miniを非表示 */
.bigimage  { display: block; 
line-height: 0px;} /* bigを表示 */
	
@media only screen and (max-width: 768px) {
.miniimage {
	display: block;
	line-height: 0px;
} /* miniを表示 */
.bigimage  { display: none; }   /* bigを非表示 */
}


/*  PCのみに表示するメニュー*/
.only_smt { display: none; }  /* miniを非表示 */
.only_pc  { display: block; 
} /* bigを表示 */
	
/*  スマホのみに表示するメニュー*/
@media only screen and (max-width: 768px) {
.only_smt {
	display: block;
	
} /* miniを表示 */
.only_pc  { display: none; }   /* bigを非表示 */
}




iframe {
    vertical-align: bottom;
}



.inside_outside {
    padding-bottom: 100px;
    padding-top: 50px;
}

/* 大きい画面用の設定-------------- */
@media (min-width:768px){
#content_top,
#link_concept,
#link_service,
#link_hello,
#link_faq,
#link_access,
#link_recruit{padding-top: 52px;
margin-top:-52px;}

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

/************************************
お問合せ
*************************************/
.contact_lead{text-align: center;
margin-bottom: 20px;}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.contact_lead{text-align: left;
margin-bottom: 20px;}
}
/* -------------end------------- */

/************************************
送信完了
*************************************/

.thanks_img{width:30%;
margin-left: auto;
margin-right: auto;
padding-top: 50px;}


/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.thanks_img{width: 50%;
margin-left: auto;
margin-right: auto;
padding-top: 50px;}
	}
/* -------------end------------- */