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

* {
	line-height: 1;
}


html {
  scroll-padding-top:120px;
	scroll-behavior: smooth;
}

img {
    border: 0;
    vertical-align: top;
	object-fit: cover;
}


/*clearfix*/
.clearfix:after{
	content: " ";
	display: block;
	visibility: hidden;
	clear: both;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
}
* html .clearfix{
	display: inline-block;
}
/* no ie mac \*/
* html .clearfix{
	height: 1%;
}
.clearfix{
	display: block;
}
.clearfix{
  overflow:hidden;
}
/* Hides from IE-mac \*/
* html .clearfix{
  height:1%;
	overflow-x : hidden;
}

* {
	box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
word-wrap: break-word;
}

/*body*/

body {
width: 100%;
	-webkit-text-size-adjust: 100%;
	}

li {
	list-style-type: none;
}

a {
	text-decoration: none;
	transition: 0.5s;
}

a:hover {
	opacity: 0.75;
}

/* basefont */
:root {
  --base-font: "Noto Sans JP", sans-serif;
  --title-font: "Zen Maru Gothic", sans-serif;
  --subtitle-font: "Montserrat", sans-serif;
  --number-font: "Roboto", sans-serif;
	
  --base-font-size: 16px;

  --base-font-weight: 400;
  --base-font-weight2: 500;
  --base-font-weight3: 600;
	
  --color-base: #000;
  --color-main: #0063B0;
  --color-sub: #2DB0D0;
  --color-sub2: #00A99D;
}

.contents-box {
	font-family: var(--base-font);
font-weight: var(--base-font-weight);
	clear: both;
	margin-right: auto;
	margin-left: auto;
	font-size: var(--base-font-size);
	color : var(--color-base);
	line-height: 1;
}

.contents-box p {
	font-family: var(--base-font);
font-weight: var(--base-font-weight);
	font-size: var(--base-font-size);
	color : var(--color-base);
	line-height: 1.8;
	letter-spacing: 0.05em;
}

.contents-box a {
	color : var(--color-base);
	font-weight: var(--base-font-weight);
}

.contents-box p a {
	color : var(--color-base);
	font-weight: var(--base-font-weight);
}

/* animation_box */

.animation_box {
  transition: 1s ease;
	opacity: 0;
	transition-delay: .5s;
	transform: translate(0px, 0px);
}

.animation_box-bottom {
	transform: translateY(100px);
}

.animation_box-top {
	transform: translateY(-100px);
}

.animation_box-left {
	transform: translateX(-100px);
}

.animation_box-right {
	transform: translateX(100px);
}

.animation_box-delay2 {
	transition-delay: 1s;
}

.animation_box-delay3 {
	transition-delay: 1.5s;
}

.animation_box-delay4 {
	transition-delay: 2s;
}

.animation_box.effect {
	opacity: 1;
	transform: translate(0px, 0px);
}


/* title-page */

.title-page {
    width: 100%;
    height: 360px;
    background-image: url("../img/common/back-pagetitle.png");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
}

.title-page .box-inner {
    width: 92%;
    height: 100%;
    text-align: left;
    display: flex;
  justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
background-position: right top 50px;
background-repeat: no-repeat;
}

.title-page .box-text {
    position: relative;
}

.title-page .box-text::before {
    content: "";
	position: absolute;
left: 0px;
background-position: left top;
background-repeat: no-repeat;
	background-size: auto 100%;
	width: 50vw;
	height: 60px;
    margin-top: -35px;
}

.title-page h2 {
    font-family: var(--title-font);
    font-size: 40px;
color: var(--color-main);
font-weight: var(--base-font-weight2);
line-height: 1.2;
}


/* contents */

.contents {
	width: 100%;
	position: relative;
}

.contents img {
	width: 100%;
height: auto;
}

.contents .box-img {
	text-align: center;
}

.contents .container {
	width: 100%;
	position: relative;
	padding-top: 120px;
}

.contents .container section {
	position: relative;
}

.contents .container section {
	margin-bottom: 130px;
}

.contents p {
     font-family: var(--title-font);
    font-weight: var(--base-font-weight2);
    line-height: 2.2;
}


/* layout */

.layout-c {
	margin-left: auto;
	margin-right: auto;
}

.layout-1000 {
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.layout-1100 {
	width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

.layout-1200 {
	width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* layout-whiteback */

.layout-whiteback {
	background-color: #FFF;
	box-shadow: 0px 0px 20px rgba(80,160,254,0.15);
}


/* faq */

.question {
    display: flex;
  justify-content: flex-start;
align-items: center;
}

.answer p {
    height: auto;
    min-height: 70px;
}

@media screen and (max-width: 767px) {
 
.question::before{
    top:0px;
    height: 100%;
    display: flex;
  justify-content: center;
align-items: center;
flex-wrap: wrap;
    margin-top: -9px;
    }
    
    .answer p {
    min-height: 50px;
}
}

/* recruit */

.recruit_contents_list_txtbox_txt02 .txt_inner {
    display: flex;
  justify-content: flex-start;
align-items: center;
}

/* cookies_alert */

#cookies_alert p a {
    line-height: 1.3;
}

/* privacy_box */

.privacy_box p a {
    line-height: 1.8;
}


/* c-btn */

.c-btn01 h6 {
  position: relative;
  overflow: hidden;
  display: inline-block;
  border-radius: 70px;
  text-align: center;
  background: var(--color-main); /* 初期状態はメイン色 */
}

.c-btn01 h6::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 70px;

  background: var(--color-sub);     /* ホバー時に見せたい色 */
  transform: scaleX(0);             /* 初期は非表示 */
  transform-origin: left center;    /* 左から右へ */
  transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1);
}

.c-btn01 h6:hover::before {
  transform: scaleX(1);             /* ホバー時にスライド表示 */
}

.c-btn01 h6 a {
  font-family: var(--subtitle-font);
  font-size: var(--base-font-size);
  font-weight: var(--base-font-weight2);
  color: #FFF;
  line-height: 1.2;
  letter-spacing: 0.05em;
  display: inline-block;
  padding: 22px 35px;
  min-width: 300px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.c-btn01 h6 a:hover {
  opacity: 1;
}

.c-btn01 h6 a::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 0px;
  background-image: url("../img/common/link-arrow01.svg");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: auto 22px;
  width: 22px;
  height: 100%;
  transition: right .5s ease;
}

.c-btn01 h6 a:hover::after {
  right: 20px; /* ここは動かしたいなら調整 */
}



.c-btn02 {
	position: absolute;
right: 0px;
bottom: 0px;
    margin-right: -20px;
    margin-bottom: -20px;
}

.contents-top .contents06 .box-link .c-btn02 {
  margin-bottom: -10px;
    margin-right: -0px;
}

.c-btn02 h6 {
	position: relative;
  overflow: hidden;
	transition: ease .2s;
	display: inline-block;
	background-color: var(--color-main);
	border-radius: 50%;
	text-align: center;
}

.c-btn02 h6::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background:var(--color-sub);
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: left top;
    border-radius: 50%;
}

.box:hover .c-btn02 h6::before{
  transform-origin:left top;
  transform:scale(1, 1);
}

.contents-top .contents06 .box-link a:hover .c-btn02 h6::before{
  transform-origin:left top;
  transform:scale(1, 1);
}

.c-btn02 h6 span {
	display: block;
	width: 60px;
    height: 60px;
	position: relative;
	z-index: 3;
}

.contents-top .contents06 .box-link .c-btn02 h6 span {
  width: 40px;
    height: 40px;
}

.c-btn02 h6 span::after {
	content: "";
	position: absolute;
left: 0px;
top: 0px;
	background-image: url("../img/common/link-arrow02.svg");
background-position: center;
background-repeat: no-repeat;
	background-size: auto 17px;
	width: 100%;
	height: 100%;
	transition: ease .5s;
}

.contents-top .contents06 .box-link .c-btn02 h6 span::after {
  background-size: auto 12px;
}


/**
 * for SmartPhone
 */
@media screen and (min-width: 767px) {
	
	body {
	min-width: 1360px;
	}
	
a[href^="tel:"] {
    pointer-events: none;
}


}
@media screen and (max-width: 767px) {
	
html {
  scroll-padding-top:60px;
}
	
    body {
    }

/* basefont */
:root {
  --base-font-size: 14px;
}
    
/* title-page */

.title-page {
    height: 160px;
    background-image: url("../img/common/back-pagetitle-sp.png");
}

.title-page .box-inner {
    width: 98%;
    height: 100%;
background-position: right top 5px;
    background-size: auto 80%;
    padding-left: 10px;
}

.title-page .box-text::before {
	height: 20px;
    margin-top: -12px;
}

.title-page h2 {
    font-size: 18px;
}

/* contents */

.contents .box-img {
	text-align: center;
}

.contents .container {
	padding-top: 70px;
}

.contents .container section {
	margin-bottom: 80px;
}
    

/* layout */

.layout-1000, .layout-1100, .layout-1200 {
	width: 88%;
}
	
    
/* c-btn */


.c-btn01 h6:hover::before{
  transform-origin:left top;
  transform:scale(1, 1);
}

.c-btn01 h6 a {
	padding: 20px 35px;
    min-width: 260px;
}


.c-btn02 {
    margin-right: -12px;
    margin-bottom: -12px;
}

.c-btn02 h6 span {
	width: 50px;
    height: 50px;
}

.c-btn02 h6 span::after {
	background-size: auto 15px;
}


      
}