@charset "utf-8";

/*----------------------------------------------------------------
 MainLayout
 -----------------------------------------------------------------
 c/p
 <link href="./asset/css/layout.css" rel="stylesheet" type="text/css" media="screen,print" />
----------------------------------------------------------------*/

/*----------------------------------------------------------------
 custom properties
----------------------------------------------------------------*/
:root {
	/* colors */
	--text-color			: #000221;
	--main-color			: #0A4578;
	--sub-color				: #2ADAFA;
	--base-color			: #fbfdff;
	--lightgray-color		: #f2f5f8;
	--darkgray-color		: #f7f7f8;
	--bg-color				: #FFF;
	--main-gradient			: linear-gradient(90deg,#0a4578 0%, #000221 100%);

	/* width */
	--content-width		: 92vw;
	--content-padding	: 0;

	/* height */
	--header-height		: 60px;
	--box-shadow		: 0px 3px 6px rgba(0, 0, 0, 0.16);

	/* font */
	--font-size			: 1.4rem;
	--font-family		: "Noto Sans JP","ヒラギノ角ゴ Pro",'Hiragino Kaku Gothic Pro',"メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif;
	--font-family-serif	: "Noto Serif JP", serif;
	--font-family-en	: "Barlow Condensed", sans-serif;
	--line-height		: 1.5;
	--letter-spacing	: 0;
}
@media screen and (min-width: 960px) {
:root {
	/* height */
	--header-height		: 100px;

	/* width */
	--content-width		: 900px;
	--content-padding	: 0 15px;

	/* font */
	--font-size			: 1.6rem;
	--line-height		: 1.8;
	--letter-spacing	: calc(20 / 1000 * 1rem);
}
}

@media screen and (min-width: 1300px) {
:root {
	/* width */
	--content-width		: 1260px;
	--content-padding	: 0 15px;
}
}

/*----------------------------------------------------------------
 base
----------------------------------------------------------------*/

html,body{
	font-size			: 62.5%; /* 10px */
}
body{
	background			: var(--bg-color);
	line-height			: var(--line-height);
	font-size			: var(--font-size);
	font-family			: var(--font-family);
	font-weight			: 400;
	letter-spacing		: var(--letter-spacing);
	color				: var(--text-color);
}

/* inline element
-----------------------------------------------------*/

/* link
----------------------------------*/
a{
	color: var(--main-color);
	text-decoration: none;
}
a:not([class]){
	text-decoration: underline;
}

/*-----------------------------------------------------
 class
-----------------------------------------------------*/

/* separater line
-----------------------------------------------------*/
.u-separator{ display: none; }

/* anchor(pagetop)
-----------------------------------------------------*/
p.anchor{
	visibility: hidden;
	position: absolute;
	top: 0px;
	left: 0px;
}

/* br
-----------------------------------------------------*/
@media screen and (min-width: 960px) { .br_sp{ display: none; } }

/* hide
-----------------------------------------------------*/
@media screen and (max-width: 959px) { [data-hide=sp]{ display: none; } }
@media screen and (min-width: 960px) { [data-hide=pc]{ display: none; } }
@media screen and (min-width: 1300px) { [data-hide=wide]{ display: none; } }

/* view
-----------------------------------------------------*/
@media screen and (max-width: 959px) { [data-show=sp]{ display: block; } }
@media screen and (min-width: 960px) { [data-show=pc]{ display: block; } }
@media screen and (min-width: 1300px) { [data-show=wide]{ display: block; } }


/*----------------------------------------------------------------
 component
----------------------------------------------------------------*/
/* logo
----------------------------------- */
.c-logo{
	display: flex;
}
.c-logo__text {
	flex: 1 1 auto;
	line-height: 1.5;
	color: var(--main-color);
}
.c-logo__title{
	font-size: 1.7142em;
	font-weight: 700;
}
.c-logo__company{
	font-size: .86em;
}
@media screen and (min-width: 960px) {
.c-logo__title{
	font-size: 1.5em;
}
.c-logo__company{
	font-size: .75em;
}
}

/* button
----------------------------------- */
.c-button{
	list-style: none;
	display: flex;
	flex-direction: row;
	gap: 10px;
}

/* button__link
----------------------------------- */
.c-button__link{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 15px;
	background: var(--main-color);
	border-radius: 4px;
	font-weight: 700;
	box-shadow: var(--box-shadow);
	color: #fff;
}
.c-button__link i{
	position: relative;
	top: 2px;
	margin-right: 8px;
}
.c-button__link:hover{
	filter: contrast(1.1);
}
@media screen and (min-width: 960px) {
.c-button__link{
	width: 200px;
}
}
.c-button__link--contact{
	background: var(--sub-color);
	color: #0B2F36;
}

/* link
----------------------------------- */
.c-link{
	list-style: none;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	gap: 10px;
}
@media screen and (min-width: 960px) {
.c-link{
	gap: 15px;
	justify-content: flex-end;
}
}

/* section
----------------------------------- */
.l-section{
	padding: 60px 0 50px 0;
}
@media screen and (min-width: 960px) {
.l-section{
	padding: 100px 0;
}
}

/* heading title
----------------------------------- */
.c-heading__title{
	position: relative;
	margin: 0 0 40px 0;
	text-align: center;
	font-family: var(--font-family-serif);
	font-weight: 700;
	font-size: 2.1428em;
	line-height: 1.34;
	color: var(--main-color);
}
@media screen and (min-width: 960px) {
.c-heading__title{
	margin: 0 0 75px 0;
	font-size: 3.3125em;
}
}

/*----------------------------------------------------------------
 style
----------------------------------------------------------------*/
.l-wrap{
	position			: relative;
	width				: 100%;
}

/*-----------------------------------------------------
 header
-----------------------------------------------------*/
.l-header{
	position: relative;
	clear: both;
	width: 100%;
	position: sticky;
	top: 0;
	z-index: 10;
	height: auto;
	padding: var(--content-padding);
	background: var(--bg-color);
	/* filter: drop-shadow(0px 3px 6px rgba(8, 69, 120, 0.05)); */
	box-shadow: var(--box-shadow);
}
.l-header__inner{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	height: var(--header-height);
}
@media screen and (min-width: 960px) {
.l-header__inner{
	flex-wrap: wrap;
}
}
/* logo
----------------------------------- */
.c-logo--header{
	flex-direction: row;
	align-items: center;
	flex: 0 0 calc(100% - var(--header-height) - var(--header-height));
	padding: 0 0 0 4vw;
}

@media screen and (min-width: 960px) {
.c-logo--header{
	flex: 0 0 50%;
	padding: 0 0 0 40px;
}
}
.c-logo__img--header {
	flex: 0 0 80px;
}
@media screen and (max-width: 959px) {
.c-logo__img--header {
	flex: 0 0 var(--header-height);
}
.c-logo__img--header img{
	height: calc(var(--header-height) - 16px);
}
}

/* text
----------------------------------- */
.c-logo__title--header{
	font-size: 1em;
}
.c-logo__company--header{
	font-size: .7142em;
	font-weight: 700;
}
@media screen and (min-width: 960px) {
.c-logo__title--header{
	font-size: 1.25em;
}
.c-logo__company--header{
	font-size: .875em;
}
}

/* button
----------------------------------- */
@media screen and (max-width: 959px) {
.c-button--header{
	gap: 0;
}

/* button__link
----------------------------------- */
.c-button--header .c-button__link{
	width: var(--header-height);
	height: var(--header-height);
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-shadow: none;
	border-radius: 0;
}
.c-button--header .c-button__link span{
	font-size: .7142em;
	line-height: 1.6;
}


.c-button--header .c-button__link i{
	margin: 0;
	font-size: 1.5em;
}
}


/*-----------------------------------------------------
 container
-----------------------------------------------------*/
.l-container{
	position: relative;
	clear: both;
	margin: 0 auto;
	max-width: var(--content-width);
	padding: var(--content-padding);
}


/*-----------------------------------------------------
 footer
-----------------------------------------------------*/
.l-footer{
	position: relative;
	clear: both;
	width: 100%;
	background: var(--bg-color);
	border-top: 10px solid var(--main-color);
	padding: var(--content-padding);
}

.l-footer__inner{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 25px 0 0 0;
}
@media screen and (min-width: 960px) {
.l-footer__inner{
	padding: 40px 0 0 0;
}
}

/* logo
----------------------------------- */
.c-logo--footer{
	flex-direction: column;
	margin: 0 0 30px 0;
}
.c-logo__img--footer img{
	width: 100px;
	margin: 0 0 10px 0;
}
@media screen and (min-width: 960px) {
.c-logo__img--footer img{
	width: 140px;
	margin: 0 0 20px 0;
}
}
/* button
----------------------------------- */
.c-button--footer{
	margin: 10px 0 20px 0;
}
@media screen and (min-width: 960px) {
.c-button--footer{
	margin: 0 0 30px 0;
}
}

/* copyright
----------------------------------- */
.c-footer__copyright{
	text-align: center;
	padding: 0 0 20px 0;
}
@media screen and (max-width: 959px) {
.c-footer__copyright{
	margin: 20px 0 0 0;
}
}