@charset "utf-8";

@import url("/common/css/rn03/fonts.css");
/* ****************************************************************************

目次

-------------------------------------------------------------------------------

  00. モジュール

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

  00. モジュール

=============================================================================== */
/* 基本
------------------------------------------------------------------------------- */
body{	font-family: 'Noto Sans JP', "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", Arial, Helvetica, sans-serif;}
.container{
		font-size:16px;
		overflow: hidden;
}
.container .chipSection p{
	font-size:1rem;
}
.container img{
  max-width: 100%;
  height: auto;
}
.aCenter{
	text-align: center;
}
.aRight{
	text-align: right;
}
sup{
	margin: 0 1px;
	font-size: 10px;
	vertical-align: 2px;
}
.fnFade {
	transition: opacity 0.3s !important;
}
.fnFade:hover {
	opacity: 0.8;
}
.side01 {
  position: fixed;
  bottom: 20%;
  right: 0;
  width: 140px;
  z-index: 110;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeIn 0.8s ease forwards;
}
@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.side_nav {
  background-color: #062a5e;
  border-radius: 10px 0 0 10px;
  transform: translateX(0);
  transition: transform 0.3s ease;
}
.side_nav:hover{
  transform: translateX(10px);
}
.side_nav a {
	position: relative;
	display: block;
	line-height: 1.4;
	padding: 12px 0 12px 50px;
	color: #fff;
	text-decoration: none;
	font-size: 12px;
	font-weight: 400;
}

.side_nav a::before {
    content: "";
    width: 40px;
    height: 40px;
    background: url(../images/icon_inquiry.png) no-repeat 0 0;
    background-size: 40px;
    display: inline-block;
    position: absolute;
    left: 7px;
    top: 11px;
}

/*0.75rem  = 12px
0.875rem = 14px
1rem     = 16px
1.125rem = 18px
1.25rem  = 20px
1.5rem   = 24px
2rem     = 32px*/

/* MV
------------------------------------------------------------------------------- */
.chipVisual01 {
	margin: 0 0 0;
	padding: 0 10px;
	background: url(../images/main.jpg) center center no-repeat;
	background-size: cover;
}
.chipVisual01_in {
	display: -webkit-box;
	display: flex;
	align-items: center;
	max-width: 1180px;
	height: 520px;
	margin: 0 auto;
	justify-content: flex-end;	
}
.chipVisual01_box{
	display:block;
	max-width:390px;
	background-color: rgba(255, 255, 255, 0.8);
	padding:30px;
	box-sizing: border-box;
}
.chipVisual01_tit {
	line-height: 1.2;
	margin: 0;
	font-size: 46px;
	font-weight:700;
	font-family: "Noto Serif JP", "serif"
}
.chipVisual01_txt {
	font-size:22px;
	font-weight: 700;
	margin:15px 0 5px;
	line-height:1.4;
}
.chipVisual01_txt2 {
	font-size:18px;
	font-weight: 700;
	margin:0 0 20px;
	line-height:1.4;
}
.chipVisual01_btn a{
	position: relative;
	display:block;
	width:100%;
	padding:15px 0;
	background:#062a5e;
	text-align:center;
	color:#fff;
	text-decoration: none;
	font-weight:700;
	font-size:20px;
}
.chipVisual01_btn a::before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: solid 1.5px #fff;
  border-right: solid 1.5px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 15px;
	margin-top:-5px;
}
.chipVisual01_btn a:hover{
	opacity: 0.6;
}
.chipHead_in{
	position: relative;
	max-width: 1180px;
	margin:0 auto;
}
.chipHead .news{
	position: absolute;
	top:-192px;
	left:10px;
	background-color: rgba(255, 255, 255, 0.8);
	padding:10px 20px;

}
.chipHead .news p{
	font-weight:700;
	font-size:20px;
}
.chipHead .news dl {
  display: grid;
  grid-template-columns: 6em 1fr;
  gap: 2px 10px;
  margin: 0;
	/*height:55px;*/
	/*overflow-x: auto;*/
}
.chipHead .news dt {
  margin: 0;
	font-size:0.875rem;
}
.chipHead .news dd {
  margin: 0;
	font-size:0.875rem;	
}

/* メイン
------------------------------------------------------------------------------- */
.container{
	min-width: 950px;
}
.chipSection{
	padding:80px 10px;
	box-sizing: border-box;
}
.chip_In{
	margin:0 auto;
	max-width:1100px;
	box-sizing: border-box;
}
.colBox {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.colBox .colItem {
  box-sizing: border-box;
  width: calc(50% - 10px);
}
.colBox02 {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  overflow: visible;
	box-sizing: border-box;
	gap:20px;
}
.colBox02 .colItem:first-child {
  width: 30%;
	position: relative;
  box-sizing: border-box;
}

.colBox02 .colItem:last-child {
	flex: 1;
	padding: 0 20px;
  box-sizing: border-box;
}
.colBox02 .colItem:last-child .lead{
	font-size:1.25rem;
}
.colBox02 .colItem:first-child > img{
	position: absolute;
	top: 120px;
	right: 30px;
	width: clamp(250px, 30vw, 450px);
	height: auto;
	max-width: none;
	z-index: 2;
}
.titBox{
  position: relative;
  padding: 0 0 clamp(100px, 20vw, 250px) 10px;
	box-sizing: border-box;
}

.titBox::before{
	content: "";
	position: absolute;
	top: 0;
	left: calc(50% - 50vw);
	width: calc(50vw + 50%); 
	height: 100%;
	background-image: url("../images/tit_bg_l.png");	
	background-color: #09233c;
	background-repeat: no-repeat;
	background-position: right clamp(1px, 15vw, 400px) center;
	z-index: 1;
}
@media (max-width: 768px){
  .titBox::before{
    left: -10%;
    width: 110%;
  }
}

.colBox02_reverse{
	flex-direction: row-reverse;
}
.colBox02_reverse .colItem:first-child > img{
	position: absolute;
	top: 120px;
	left: 30px;
	width: clamp(250px, 30vw, 450px);
	height: auto;
	max-width: none;
}
.colBox02_reverse .titBox{
  padding: 0 10px clamp(100px, 20vw, 250px) 0;
}
.colBox02_reverse .titBox::before{
	left:auto;
	right: calc(50% - 50vw);
	background-image: url("../images/tit_bg_r.png");	
	background-position: left clamp(1px, 15vw, 400px) center;
}
.colBox02_reverse .titBox h2{
	text-align:right;
}


.titBox h2{
	position: relative;
	color:#fff;
	padding-top:20px;
	font-size:clamp(30px, 4vw, 40px);
	font-weight:700;
	z-index: 3;
}
.section-title{
	text-align:center;
	font-weight:700;
	font-size:2rem;
	margin-top:30px;
}

/* chip01
------------------------------------------------------------------------------- */


/* chip02
------------------------------------------------------------------------------- */
#chip02{
	position: relative;
	background-image:url("../images/bg.png");
	background-size: cover;
	background-position: top;	
	z-index: 0;
}
#chip02 .colBox02 > .colItem:last-child {
  flex: 1;
  display: flex;
  align-items: center; 		
}
#chip02 .colBox_point {
	position: relative;
  display: flex;
	background:#fff;
	margin-top:50px;
}
#chip02 .colBox_point .colItem:first-child {
  width: 35%;
	background:#ccc;
  flex: 1;
  display: flex;
  align-items: center; 	
}
#chip02 .colBox_point .colItem:last-child {
  width: 65%;
	padding:20px;
	box-sizing: border-box;
}

#chip02 .numItem {
	position: absolute;
	top:-40px;
	left:10px;
	width:76px;
	height:76px;
  display: inline-block;
  background: #fff;
  color: #333;
  border-radius: 50px;
  font-size: 32px;
  font-weight: 700;
	text-align:center;
	line-height:1;
	border:2px solid #efefef;
}

#chip02 .numItem span {
  font-size: 12px;
	font-weight:bold;
  padding-top:18px;
	display:block;
}
#chip02 .colBox_point .colItem:last-child h3{
  font-size: 20px;
  color: #333;
  padding: 0;
}
#chip02 .chip02btn {
	position: relative;
  display: block;
  background: #fff;
  color: #062a5e;
  padding: 12px 30px 12px 0;
  border-radius: 10px;
	border:2px solid #062a5e;
  font-size: 16px;
	text-align:center;
  margin:20px auto 0;
	text-decoration: none;
	max-width:300px;
	transition: background-color 0.2s ease;	
}
#chip02 .chip02btn::before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #062a5e;
  border-right: solid 2px #062a5e;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 15px;
	margin-top:-3px;
}
#chip02 .chip02btn:hover{
	background-color:#e3e9f1;
}

/* chip03
------------------------------------------------------------------------------- */
#chip03 .titBox h2{
	line-height: 1;
}
#chip03 .chip03_txt{
	color:#e70303;
	margin-bottom:20px;
}
#chip03 h3{
	font-size:20px;
	font-weight: bold;
	margin-top:30px;
}

/* chip04
------------------------------------------------------------------------------- */
#chip04 {
	min-width:960px;
  background: url(../images/bg.png);
  background-size: cover;
  padding: 20px 0 40px;
  position: relative;
}
#chip04::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
 * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.swiper-container {
  width: 100%;
  min-width: 960px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 1;
}
.swiper {
  width: 100%;
  padding: 40px 0;
  display: flex;
  align-items: center;
}
.swiper-wrapper {
  align-items: center;
}
.swiper-slide {
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transform: none;
  transition:
    transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 0.5s ease;
}
.swiper-slide-active {
  width: 400px;
  opacity: 1;
  z-index: 10;
}
.slide-content {
  width: 100%;
  background: #fff;
  overflow: hidden;
  transform: scale(0.85);
}

.slide-image {
  width: 100%;
  aspect-ratio: 16 / 10.5;
  overflow: hidden;
}
.slide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slide-info {
  display: none;
  padding: 15px;
  background: #fff;
}
.swiper-slide-active .slide-info {
  display: block;
  animation: fadeInUp 0.4s ease 0.1s both;
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.slide-title {
  font-weight: 700;
  margin-bottom: 10px;
	font-size:22px;
}
.info-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  font-size: 12px;
}
.info-table th {
  width: 25%;
  padding: 6px 8px;
  background: #efefef;
  color: #333;
  text-align: left;
  font-weight: bold;
}
.info-table td {
  width: 25%;
  padding: 6px 8px;
  color: #333;
}
.custom-nav {
  position: absolute;
  top: 260px;
  width: 50px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}
.custom-nav-prev {
  left: 20px;
}
.custom-nav-next {
  right: 20px;
}
.custom-nav svg {
  width: 40px;
  height: 60px;
  fill: #333;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}
.custom-nav:hover svg {
  fill: #000;
}
.swiper-button-prev,
.swiper-button-next {
  display: none;
}
@media (max-width: 1024px) {
  .swiper-slide,
  .swiper-slide-active {
    min-width: auto;
  }
}





/* chip05
------------------------------------------------------------------------------- */
#chip05 p{
	margin-bottom:0;
	text-align: center;
}
#chip05 h3{
	text-align: center;
	font-size:24px;
	margin-bottom:20px;
}


/* chip06
------------------------------------------------------------------------------- */
#chip06{
	background-image:url("../images/bg.png");
	background-size: cover;
	background-position: bottom;
	padding:50px 0;
	margin-bottom:20px;
}
#chip06 .chip_In{
	margin:0 auto 20px;
}
#chip06 p{
	text-align:center;
	color:#fff;
	font-size:1.5rem;
}
.chip06_btn{
	margin-top:20px;
}
.chip06_btn a{
	display: inline-block;
	position: relative;
	padding:20px;
	width:100%;
	max-width:470px;
	background:#000;
	text-align:center;
	color:#fff;
	text-decoration: none;
	border-radius: 10px;
	box-sizing: border-box;
}
.chip06_btn a::before {
  content: '';
  width: 10px;
  height: 10px;
  border: 0;
  border-top: solid 1.5px #fff;
  border-right: solid 1.5px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 15px;
	margin-top:-5px;
}