@charset "utf-8";

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

cmn.css
Font / Layout / Parts /

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

/*============
Font
=============*/
/* font-family DAICELコーポレートサイトと同じ */
body{
  font-family: Meiryo, 'メイリオ', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}

body:lang(en),
body:lang(de){
  font-family: Arial, Helvetica, sans-serif;
}

body:lang(zh-cmn-Hans){
  font-family: Noto Sans SC, Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif;
}

html {
  font-size: 62.5%; /* PC ルートのフォントサイズ10px */
  scroll-behavior: smooth; /* ページ内リンクをスムーズスクロールする */
}

body {
  color: #545454;
  font-size: 1.6em; /* 基本のフォントサイズ1.6em（16px） */
  line-height: 1.8;
}

p, ul, ol, dl, table, blockquote, address, pre, iframe, form, figure {
  font-size: var(--txt-size9);
}

small{
  font-size: var(--txt-size10);
}

h1, h2, h3, h4, h5, h6{
  line-height: 1.5;
}

em, i, b{
  font-weight: normal;
  font-style: normal;
}

a:focus{
  text-decoration: none;
}

/* 定義 */
:root {
  /* 線の色 */
  --line-black1: #545454;
  --line-black2: #a3a3a3;
  --line-black3: #e1e2e3;
  /* テキストの色 */
  --txt-black1: #545454;
  --txt-black2: #a3a3a3;
  --txt-black3: #e1e2e3;
  --txt-white: #fff;
  --txt-red1: #e60020;
  --txt-blue1: #005aaa;
  /* テキストのサイズ */
  --txt-size1: max(3.6rem, 26px);
  --txt-size2: max(3.2rem, 24px);
  --txt-size3: max(2.8rem, 22px);
  --txt-size4: max(2.4rem, 20px);
  --txt-size5: max(2.2rem, 20px);
  --txt-size6: max(2.0rem, 18px);
  --txt-size7: max(1.8rem, 18px);
  --txt-size8: max(1.6rem, 16px);
  --txt-size9: max(1.6rem, 14px);
  --txt-size10: max(1.4rem, 14px);
  --txt-size11: max(1.3rem, 13px);
  /* 背景 */
  --bg-blue1: #003889;
  --bg-blue2: #005aaa;
  --bg-blue3: #13a7eb;
  --bg-blue4: #addcff;
  --bg-blue5: #eaf6fd;
  --bg-gray1: #f6f6f6;
  --bg-red1: #fff0f2;
}

/*============
Layout
=============*/
/*--------------------
body
--------------------*/
#wrap{
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
}

#main{
  padding-bottom: 6.4rem;
  flex: 1;
  position: relative;
}

/*--------------------
title
--------------------*/
/* second-ttl */
.second-ttl{
  margin-top: 8rem;
  padding-bottom: 3.2rem;
  position: relative;
  font-size: var(--txt-size2);
  font-weight: bold;
  text-align: center;
}

.second-ttl i{
  display: block;
  font-size: var(--txt-size6);
}

.second-ttl::before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to right, #addcff, #addcff 0.8rem, transparent 0.8rem, transparent 0.8rem), linear-gradient(to right, #addcff, #addcff 0.8rem, transparent 0.8rem, transparent 0.8rem), linear-gradient(to right, #addcff, #addcff 0.8rem, transparent 0.8rem, transparent 0.8rem);
  background-repeat: no-repeat;
  background-position: calc(50% - 1.6rem) bottom, center bottom, calc(50% + 1.6rem) bottom;
  background-size: 0.8rem 0.8rem, 0.8rem 0.8rem, 0.8rem 0.8rem;
  pointer-events: none;
}

.second-txt{
  margin-top: 2.4rem;
}

/* third-ttl */
.third-ttl{
  margin-top: 8rem;
  padding-bottom: 2.4rem;
  position: relative;
  font-size: var(--txt-size3);
  font-weight: bold;
}

.third-ttl::after{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to right, #545454, #545454 4rem);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 4rem 0.6rem;
  pointer-events: none;
}

.third-txt{
  margin-top: 2.4rem;
}

/* fourth-ttl */
.fourth-ttl{
  margin-top: 4rem;
  padding-bottom: 1.5rem;
  position: relative;
  font-size: max(2.4rem, 22px);
  font-weight: bold;
}

.fourth-ttl::after{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to right, #545454, #545454 4rem);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 3rem 0.3rem;
  pointer-events: none;
}

.fourth-txt{
  margin-top: 2.4rem;
}

/* fifth-ttl */
.fifth-ttl{
  margin-top: 4rem;
  position: relative;
  font-size: max(2.2rem, 20px);
  font-weight: bold;
}

.fifth-txt{
  margin-top: 2.4rem;
}

/* sixth-ttl */
.sixth-ttl{
  margin-top: 4rem;
  position: relative;
  font-size: max(2.0rem, 18px);
  font-weight: bold;
}

.sixth-txt{
  margin-top: 2.4rem;
}

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

Parts

=============*/
/*-------------
only
--------------*/
.tablet_sp_only,
.tablet_only,
.sp_only{
  display: none;
}

.nowrap{
  white-space: nowrap;
}

/* ----------
contact-btn
---------- */
.contact-btn{
  margin-top: 3.2rem;
  text-align: center;
}

.contact-btn a{
  padding: 2.4rem 5.6rem;
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  z-index: 0;
  border: 2px solid #fff;
  background-color: #005aaa;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
  color: #fff;
}

.contact-btn a::before,
.contact-btn a::after{
  content: '';
  position: absolute;
  z-index: -1;
  background-color: #eaf6fd;
}

.contact-btn a::after{
  box-sizing: border-box;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
/* for IE11 */
  border: 0 solid #eaf6fd;
  transition-duration: 0.8s;
  transform: skew(-50deg);
  transform-origin: top left;
  /* for IE11 */
}

.contact-btn a:hover{
  color: #005aaa;
}

.contact-btn a:hover::after{
  width: 150%;
  height: 100%;
  border: 1px solid #eaf6fd; /* for IE11 */
}

.contact-btn a span{
  padding-right: 3rem;
  display: block;
  position: relative;
}

.contact-btn a span::before{
  content: '';
  position: absolute;
  right: 0;
  background: url(../img/popup_ic02.png)no-repeat right center;
  background-size: 1.6rem auto;
  height: 100%;
  width: 1.6rem;
}

.contact-btn a:hover span::before{
  background: url(../img/popup_ic01.png)no-repeat right 0 center;
  background-size: 1.6rem auto;
}

/* ----------
contact-btn--white
---------- */
.contact-btn--white{
  margin-top: 3.2rem;
  text-align: center;
}

.contact-btn--white a{
  padding: 2.4rem 6.6rem;
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  z-index: 0;
  border: 2px solid #fff;
  background-color: #fff;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
  color: #005aaa;
  font-size: 1.8rem;
}

.contact-btn--white a::before,
.contact-btn--white a::after{
  content: '';
  position: absolute;
  z-index: -1;
  background-color: #eaf6fd;
}

.contact-btn--white a::after{
  box-sizing: border-box;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
/* for IE11 */
  border: 0 solid #eaf6fd;
  transition-duration: 0.8s;
  transform: skew(-50deg);
  transform-origin: top left;
  /* for IE11 */
}

.contact-btn--white a:hover{
  color: #005aaa;
}

.contact-btn--white a:hover::after{
  width: 150%;
  height: 100%;
  border: 1px solid #eaf6fd; /* for IE11 */
}

.contact-btn--white a span{
  padding-right: 3rem;
  display: block;
  position: relative;
}

.contact-btn--white a span::before{
  content: '';
  position: absolute;
  right: 0;
  background: url(../img/popup_ic01.png)no-repeat right center;
  background-size: 1.6rem auto;
  height: 100%;
  width: 1.6rem;
}

.contact-btn--white a:hover span::before{
  background: url(../img/popup_ic01.png)no-repeat right 0 center;
  background-size: 1.6rem auto;
}

/* footer-nav */
.footer-nav__wrap{
  border-top: 1px solid #ccc;
  background-color: #003889;
  color: #fff;
}

.footer_wrap{
  margin: 0 auto;
}

.fotter-nav{
  margin: 0 auto;
  padding-top: 1.6rem;
  border-top: 1px dotted rgba(255, 255, 255, 0.6);
  margin-top: 0.2rem;
}

.footer-box__second-title {
  font-size: var(--txt-size8);
}

.footer-box__third-title {
  font-size: var(--txt-size8);
}

.footer-nav__wrap a {
  padding-left: 1em;
  display: inline-block;
  position: relative;
  color: #fff;
}

.fotter-nav li {
  margin: 0 0.8rem;
  font-size: var(--txt-size9);
}

.fotter-nav .fotter-nav__ttl {
  color: #fff;
  margin: 0;
}

.fotter-nav .fotter-nav__ttl:not(:first-of-type) {
  margin-top: 1.6rem;
}

.footer-box__second-title + .footer-box__third-title {
  margin-top: 0.4rem;
}

.footer-box__third-title a::before,
.footer-box__second-title a::before {
  top: 0.5em;
}

.fotter_inquiry{
  text-align: center;
}

.footer-nav__wrap a:hover{
  opacity: 0.7;
}

.footer-nav__wrap a::before{
  content: '';
  margin: 0 auto;
  display: block;
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg);
}

.footer-nav__wrap .current a::before,
.fotter-nav li.current a::before{
  top: 0.8em;
  border: none;
  border-top: 1px solid #fff;
  transform: none;
}

.fotter_inquiry{
  padding: 2.4rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}

.br_pc{
  display: inline-block;
}

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

media queries

=============*/
/*-------------
PC
--------------*/
@media screen and (min-width: 960px){
  /* footer-nav */
  .footer_wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1236px;
    width: 100%;
    padding-bottom: 4.8rem;
  }

  .footer-box__wrap{
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 65%;
  }

  .footer-box__wrap .footer-box{
    width: 50%;
  }

  .footer-box{
    padding: 4.8rem 0 0 4.8rem;
  }

  .first-box{
    padding: 0;
  }

  .br_sp{
    display: none;
  }
}

/*-------------
タブレット
--------------*/
@media (max-width: 959px){
  /* only */
  .tablet_sp_only,
  .tablet_only{
    display: block;
  }

  .pc_only{
    display: none;
  }

  .br_pc{
    display: none;
  }

  .br_sp{
    display: none;
  }

  /* footer-nav */
  .footer-box__wrap{
    display: block;
  }

  /* footer-nav */
  .footer-nav__wrap{
    padding: 0 1.6rem;
  }

  .footer_wrap{
    padding-bottom: 3.2rem;
  }

  .footer-box{
    margin-top: 3.2rem;
  }

  .fotter-nav p{
    font-size: 1.4rem;
  }
}

/*-------------
スマホ
--------------*/
@media (max-width: 519px){
  html{
    font-size: 46.875%; /* スマホ ルートのフォントサイズ7.5px PCの75% */
  }

  /* only */
  .sp_only{
    display: block;
  }

  .pc_only,
  .tablet_only,
  .pc_tablet_only{
    display: none;
  }

  .br_pc{
    display: none;
  }

  .br_sp{
    display: inline-block;
  }
}