@charset "utf-8";

@import url("reset.css");
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900|Oswald:200,300,400,500,600,700|Bebas:400&display=swap');

/* -------------------------------
   BASE
------------------------------- */

/* margin */
.mt-60 {margin-top:-60px!important;}
.mt-50 {margin-top:-50px!important;}
.mt-40 {margin-top:-40px!important;}
.mt-30 {margin-top:-30px!important;}
.mt-20 {margin-top:-20px!important;}
.mt-10 {margin-top:-10px!important;}
.mt0 {margin-top:0!important;}
.mt5 {margin-top:5px!important;}
.mt10 {margin-top:10px!important;}
.mt15 {margin-top:15px!important;}
.mt20 {margin-top:20px!important;}
.mt25 {margin-top:25px!important;}
.mt30 {margin-top:30px!important;}
.mt40 {margin-top:40px!important;}
.mt50 {margin-top:50px!important;}
.mt60 {margin-top:60px!important;}
.mt70 {margin-top:70px!important;}


/* padding */
.pb10{padding-bottom:10px; }

/* float */
.left { float:left;}
.right { float:right;}
.fNone { float:none!important;}
.clear { clear:both; }

/* align */
.tLeft { text-align:left!important;}
.tCenter { text-align:center!important;}
.tRight { text-align:right!important;}
.vTop { vertical-align:top!important;}
.vMiddle { vertical-align:middle!important;}
.vBottom { vertical-align:bottom!important;}

.nowrap { white-space:nowrap; }

/* color */
.blue { color:#144398;}
.red { color:#A30035;}
.green { color:#AEC533;}
.pink { color:#EA609E;}

/* text */
.normal { font-weight:normal; }
.bold { font-weight:bold; }
.f10 { font-size:10px!important;}
.f11 { font-size:11px!important;}
.f12 { font-size:12px!important;}
.f13 { font-size:13px!important;}
.f15 { font-size:15px!important;}
.f16 { font-size:16px!important;}
.f18 { font-size:18px!important;}
.f35 { font-size:35px!important;}
.f42 { font-size:42px!important;}
.lh10 { line-height:1!important;}
.lh12 { line-height:1.2!important;}
.lh15 { line-height:1.5!important;}
.lh18 { line-height:1.8!important;}
.lh20 { line-height:2!important;}
.gothic { font-family:Arial,Verdana,Helvetica,Roboto,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro','Hiragino Kaku Gothic Pro','Meiryo UI','メイリオ',Meiryo,'游ゴシック','Yu Gothic',sans-serif;}
.serif { font-family:Georgia,'Times New Roman','ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝','Yu Mincho',HG明朝B,'ＭＳ Ｐ明朝','ＭＳ 明朝',serif;}

/* color */
.block { display:block!important;}
.inline { display:inline!important;}
.inlineBlock { display:inline-block!important;}

/* link */
a {color: #333;text-decoration:underline;}
a:hover {color: #333;text-decoration:none;}

/* transition */
.transition05 {
	-moz-transition-duration:0.5s;
	-o-transition-duration:0.5s;
	-ms-transition-duration:0.5s;
	transition-duration:0.5s;
}

img {
	vertical-align: middle;
}
a img {
	transition-duration: .25s;
}
a:hover img {
	opacity: 0.75;
}


/* -------------------------------
   common
------------------------------- */

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
html {
	background:#FFF;
    height: 100%;
}


html {
  /*viewport 375px のとき font-size 16px*/
  font-size: calc(100vw * 16 / 375);
  }
  @media (min-width: 768px) {
    /* viewport 768px のとき font-size 16px*/
    font-size: calc(100vw * 16 / 768);
  }
  
  @media (min-width: 1240px) {
    /*viewport 1240px のとき font-size 18px*/
    font-size: calc(100vw * 18 / 1240);
  }
  
  @media (min-width: 1440px) {
    /*viewport 1440px のとき font-size 20px*/
    font-size: calc(100vw * 20 / 1440);
  }

body {
	font-size:18px;
	line-height:1.8;
	background:#FFF;
	font-family:'Noto Sans JP', 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro','Hiragino Kaku Gothic Pro','Meiryo UI','メイリオ',Meiryo,'游ゴシック','Yu Gothic',sans-serif;
    position: relative;
    margin: 0;
}

p{
    font-feature-settings: "palt";
    line-break: strict;
    overflow-wrap: break-word;
}

.oswald {
	font-family:'Oswald',sans-serif;
}
.bebas{
    font-family: 'Bebas Neue';
}
.thin { font-weight:100; }
.light { font-weight:200; }
.regular { font-weight:500; }
.medium { font-weight:100; }
.bold { font-weight:700; }
.black { font-weight:900; }

.italic {font-style:italic;}

.vertical{
     writing-mode: vertical-rl;
}


.btns,
.links {
	list-style: none;
}



/* -------------------------------
   header
------------------------------- */
#header{
    background-color: rgb(15,49,141);
    width: 100%;
}

.header_wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#siteCopy {
	color: #519B2E;
	border: 2px solid #519B2E;
	text-align: center;
	line-height: 1;
}



#logo a{
    color: #FFF;
    text-decoration: none;
    font-weight: 500;
}

#logo span{
    font-family: 'Oswald',sans-serif;
    font-size:16px;
    color:#8798c6;
}

/* -------------------------------
   hero
------------------------------- */




/*テキスト部分*/
.hero_wrap_txt{
    font-feature-settings: "palt";
    font-weight: 700;
}

.hero_text_2{
    display: flex
}
.hero_text_2 span{
    writing-mode: vertical-rl;
}


.popout {
    overflow: hidden;
    /*display: block;*/
    position: relative;
}
.popout .popout_active {
    position: relative;
    /*display: block;*/
    animation: popanime 1.4s cubic-bezier(.10,1,.22,1) .7s forwards;
    transform: translateY(6rem);
}
.popout_sub {
    overflow: hidden;
    display: block;
    position: relative;
}
.popout_sub .popout_active {
    position: relative;
    /*display: block;*/
    animation: popanime 1.4s cubic-bezier(.10,1,.22,1) .7s forwards;
    transform: translateY(6rem);
}

@keyframes popanime {
    from {
        transform: translateY(6rem);
    }
    to {
        transform: translateY(0rem);
    }
}






/* -------------------------------
   footer
------------------------------- */

#footer {
	background-color: rgb(15,49,141);
    color: #FFF;
}

.footer_content a{
    color: #FFF;
}
.footer_content li{
    list-style-type: none;
}

address{
    font-style: normal;
}



/* -------------------------------
   contents
------------------------------- */

h2{
    color: rgb(15,49,141);
    font-family: 'oswald';
}
.h2_ttl span{
    color: rgb(15,49,141);
    font-weight: 700;
}

.greeting_content_txt{
    color: rgb(15,49,141);
    font-weight: 700;
}



#feature,#equipment,#news,#contact{
    background-color: rgb(239,239,239);
}

.works_content{
    width:100%;
}
.works_content dt{
    border: 1px solid #0f318d;
    color: #0f318d;
    margin-bottom: 1em;
    padding: .3em .5em;
    font-weight: 700;
}

.works_content dd{
    border: 1px solid #8798c6;
    background-color: #e7eaf3;
    color: #0f318d;
    font-weight: 500;
    display: flex;
    align-items: center;
    padding-left: 0.5em;
}

.equipment_content_detail h3{
    border: 1px solid #0f318d;
    color: #0f318d;
    margin-bottom: 1em;
    display: flex;
    align-items: center;
}



.profile_content dt{
    border-bottom: 1px solid #0b1c3a;
    padding: 1em 0;
}
.profile_content dd{
    border-bottom: 1px solid #b5bac4;
    padding: 1em 0;
}
.profile_content dt:first-child{
    border-top: 1px solid #0b1c3a;
}
.profile_content dd:nth-child(2){
    border-top: 1px solid #b5bac4;
}

.cm-box dl{
    padding-bottom: 10px;
}


/*contact form*/
.contact_content_privacy a{
    color: #f15a24;
    text-decoration: underline;
}



.contact_content_bg_gray{
    background-color: #d9d9d9;   
}
.submit{
    background-color: #0f318d;
    color: #fff;
}


/*contact form*/



.tel_box{
    border-top: 1px solid #B5BAC4;
    border-bottom: 1px solid #B5BAC4;
}

.tel_ttl{
    font-size: .9em;
}



/* モーダル */
.modal-overlay {
  align-items: center;
  background: rgba(0,0,0,.6);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;
}

.modal-container {
  background-color: #fff;
  max-height: 80vh;
  overflow-y: auto;
  padding: 30px;
  width: 80%;
}

.modal-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  position: relative;
}

.modal-close {
  background: transparent;
  border: 0;
  position: absolute;
  top: 0;
  right: 0;
}

.modal-header .modal-close::before {
  content: "\2715";
  color: #fff;
  background-color: #0f318d;
  padding: .5em;
}

.modal-content {
  line-height: 1.5;
  margin-bottom: 2rem;
  margin-top: 1rem;
}

.modal-open {
  /*display: block;
  margin: 100px auto;*/
}

.box01 {
  background-color: #ccc;
  height: 200px;
  margin: 0 auto;
  width: 80%;
}

.box02 {
  background-color: #ccc;
  height: 200px;
  margin: 0 auto;
  width: 80%;
}

/* モーダルアニメーション */
@keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes mmslideIn {
  from {
    transform: translateY(15%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes mmslideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10%);
  }
}

.micromodal-slide {
  display: none;
}

.micromodal-slide.is-open {
  display: block;
}

.micromodal-slide[aria-hidden="false"] .modal-overlay {
  animation: mmfadeIn .3s cubic-bezier(.0, .0, .2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal-container {
  animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal-overlay {
  animation: mmfadeOut .3s cubic-bezier(.0, .0, .2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal-container {
  animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide .modal-container,
.micromodal-slide .modal-overlay {
  will-change: transform;
}
.modal-content h3{
    color: #0f318d;
}

.modal-content p{
    margin-bottom: 1.5em;
}

.close_btn{
    background-color: #0f318d;
    color: #fff;
    padding: 1em 5em;
    text-align: center;
    border: none;
}