/*
Theme Name: X-TECH5 Ver.1.0
Author: Nobuyoshi Kosada
Author URI: https://www.hoku.co.jp/
Description: Ver.0.1
*/

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

/***************************** import css */
/*@import url("common/css/reset.css");*/
@import url("common/css/nav.css");
@import url("common/css/indicator.css");
@import url("common/css/blog.css");

/***************************** webフォントcss */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');


/***************************** カラー設定 */

/*キーカラー
#1CB3C3
28 179 195 1.00
*/

/*ベースカラー
#EDF4FA
*/

/*差し色
#E9787C
*/

/* ===============================================================
GLOBAL
================================================================== */

html,body{
	height: 100%;
	color: #333333;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 14px;
	line-height: 1.8em;
 margin: 0;
 padding: 0;
 border: none;
	background-color: #ccc;
}

#wrap {
	position: relative;
	min-height: 100%;
	height: 100%;
}

*{
box-sizing: border-box;
}


/***************************** a */

a:link , a:visited {
	color:#1CB3C3;
	text-decoration: underline;
}
@media screen and (min-width: 560px) {
a:hover {
	color: #D2540E;
}
}
.fade {  
    -webkit-transition: 0.3s ease-in-out;  
       -moz-transition: 0.3s ease-in-out;  
         -o-transition: 0.3s ease-in-out;  
            transition: 0.3s ease-in-out;  
} 
@media screen and (min-width: 560px) {
.fade:hover {  
    opacity: 0.4;  
    filter: alpha(opacity=60);  
} 
}

/* ===============================================================
モジュール
================================================================== */

/***************************** ページトップ */

.page-top{
display: inline-block;
position: fixed;
bottom: 10px;
right: 10px;
text-align: center;
background-color: #1CB3C3;
color: #fff!important;
line-height: 1em;
padding: 10px;
font-size: 24px;
border-radius: 10px;
border: 2px solid #fff;
z-index: 200!important;
}

/***************************** 見出し */

h2 span.sub-title{
font-family: 'Noto Sans JP', sans-serif;
font-size: 1.5vw;
line-height: 1.5em;
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
}

@media (min-width: 1600px) {
h2 span.sub-title{
font-size: 22px;
}
}

@media screen and (max-width: 959px) {
h2 span.sub-title{
font-size: 14px;
}
}


h3{
margin-bottom: 2em;
}

.ttl-style01{
display: block;
opacity: 1;
font-family: 'Oswald';
font-weight: 300;
font-size: 3vw;
line-height: 1em;
color: #ccc;
}

.ttl-style02{
background-image: url("common/images/ttl_line_style01.png");
background-repeat: no-repeat;
background-position: left bottom;
padding-bottom: 0.8em;
}


/***************************** 文字スタイル */

i{
font-size: 0.7em;
font-style: normal;
}

.note{
font-size: 85%;
}

.material-icons-outlined,
a .material-icons-outlined{
text-decoration: none!important;
}

/***************************** 文字スタイル */

.line-1{
margin-bottom: 1em;
}

.line-2{
margin-bottom: 2em;
}

.line-3{
margin-bottom: 3em;
}


/***************************** 引用スタイル */

.post blockquote{
background-color: #eee;
padding: 40px 20px 20px 20px;
border-radius: 10px;
position: relative;
}

.post blockquote::before{
font-family: "Material Icons";
content: "\e244"; /* アイコン「”」 */
font-weight: 400;
font-size: 3em;
position: absolute;
top: 10px;
left: 10px;
color: #ccc
}

/***************************** 画像 */

.img-pc{
display: block;
}

.img-tb{
display: none;
}

.img-sp{
display: none;
}

.img-std{
display: block;
text-align: center;
}
.img-std img{
width: auto;
height: auto;
}

.img-normal{
width: auto;
height: auto;
}

.img-right{
float: right;
margin-left: 1em;
}

.img-right::after{
content: '';
display: block;
clear: both;
}

/***************************** 改行 */
.br-pc{
display: block;
}

.br-sp{
display: none;
}

/***************************** ulリセット */

.ul-set{
list-style: none;
margin: 0px;
padding: 0px;
display: block;
}

/***************************** 余白 */

.mgb10{
margin-bottom: 10px;
}

.mgb20{
margin-bottom: 20px;
}

.mgb30{
margin-bottom: 30px;
}

.mgb40{
margin-bottom: 40px;
}

.mgb50{
margin-bottom: 50px;
}

.mgu10{
margin-top: 10px;
}

.mgu20{
margin-top: 20px;
}

.mgu30{
margin-top: 30px;
}

.mgu40{
margin-top: 40px;
}

.mgu50{
margin-top: 50px;
}
/***************************** レイアウト */

/*画像*/
img{
width: 100%;
height: auto;
}

/*FLEX*/
.column {
display: flex;
flex-wrap: wrap;
align-items: center;
}

.col-1-2{
width: 50%;
}

/*テキスト画像置換*/
.replace {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

.content-wrap{
width: 100%;
}

.inner{
margin-left: auto;
margin-right: auto;
width: 90%;
max-width: 1280px;
}

.inner-content{
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 1024px;
}

/***************************** アコーディオン */
.acd-check{
}
.acd-label{
  background: #1796BD;
  color: #fff;
  display: block;
  padding: 10px;
		text-align: center;
		display: none;
}
.acd-content{
  height: 0;
  opacity: 1;
  padding: 0 10px;
  transition: .5s;
  visibility: hidden;
}
.acd-check:checked + .acd-label + .acd-content{
  height: auto;
  opacity: 1;
  padding: 10px;
  visibility: visible;
}

/***************************** ボタンスタイル */

.btn-style1{
text-align: center;
margin-top: 50px;
}

.btn-style1 a{
display: inline-block;
margin: auto;
background-color: #fff;
border-radius: 100px;
padding: 10px 50px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all  0.2s ease;
position: relative;
}

@media screen and (min-width: 560px) {
.btn-style1 a:hover{
background-color: #AAD02F;
color: #fff;
}
}

.btn-style1 a span.arrow::after{
font-family: "Material Icons";
content: "\e409"; /* アイコン「●」 */
font-weight: 400;
font-size: 1.5em;
position: absolute;
    top: 50%;
				right: 10px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}



.btn-style2{
text-align: center;
margin-top: 50px;
}

.btn-style2 a{
display: inline-block;
margin: auto;
background-color: #1CB3C3;
color: #fff;
border-radius: 100px;
padding: 10px 50px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all  0.2s ease;
position: relative;
white-space: nowrap;
}

@media screen and (min-width: 560px) {
.btn-style2 a:hover{
background-color: #AAD02F;
color: #fff;
}
}

.btn-style2 a span.arrow::after{
font-family: "Material Icons";
content: "\e409"; /* アイコン「●」 */
font-weight: 400;
font-size: 1.5em;
position: absolute;
    top: 50%;
				right: 10px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.btn-style2 a.contact{
width: 200px;
text-decoration: none!important;
display: flex;
align-items: center;
}

.btn-style2 a.contact span{
margin-right: 10px;
}

.btn-style2 a.contact span.btn-txt{
text-decoration: underline;
}

.btn-style3{
text-align: center;
margin: 50px 10px 10px 10px;
}

.btn-style3 a{
display: inline-block;
margin: auto;
background-color: #1CB3C3;
color: #fff;
border-radius: 100px;
padding: 10px 80px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all  0.2s ease;
position: relative;
}

@media screen and (min-width: 560px) {
.btn-style3 a:hover{
background-color: #AAD02F;
color: #fff;
}
}

.btn-style3 a span.arrow::after{
font-family: "Material Icons";
content: "\e409"; /* アイコン「●」 */
font-weight: 400;
font-size: 1.5em;
position: absolute;
    top: 50%;
				right: 10px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.btn-style3 a.contact,
.btn-style3 a.service{
display: flex;
align-items: center;
width: 270px;
justify-content: center;
text-decoration: none!important;
}

.btn-style3 a.contact span{
margin-right: 10px;
}

.btn-style3 a span.btn-txt{
text-decoration: underline;
white-space: nowrap;
}

#contact{
margin-left: auto;
margin-right: auto;
}

#contact .column{
justify-content: center;
}


/***************************** アニメーションエフェクト */

.A1,
.A2,
.A3,
.A4{
opacity: 0;
}


.slidein{
animation: slideIn 1s forwards ease;
}
@keyframes slideIn {
  0% {
    transform: translateX(-180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
				opacity: 1;
  }
}

.slidein-r{
animation: slideIn-r 1s forwards  ease;
}

@keyframes slideIn-r {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
				opacity: 1;
  }
}

.slideup{
animation: slideUp 1s forwards ease;
}

@keyframes slideUp {
  0% {
    transform: translateY(180px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
				opacity: 1;
  }
}

.slidedown{
animation: slidedown 1s forwards ease;
}

@keyframes slidedown {
  0% {
    transform: translateY(-180px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
				opacity: 1;
  }
}

.fadein{
animation: fadein 1s forwards ease;
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
				opacity: 1;
  }
}

.d1 {animation-delay:1s;}
.d2 {animation-delay:1.1s;}
.d3 {animation-delay:1.2s;}
.d4 {animation-delay:1.3s;}


.flash{
  animation: flash 1s linear infinite;
}

@keyframes flash {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
  
  
  100% {
    opacity: 0;
  }
}

/***************************** パンくず */

.breadcrumb ul{
display: flex;
list-style: none;
}

.breadcrumb ul li{
margin: 0 10px 0 0;
padding: 0px;
display: table;
vertical-align: middle;
font-size: 90%;
}

.breadcrumb ul li:nth-of-type(1)::before{
content: '\e88a';
font-family: "Material Icons";
font-weight: 900;
color: #009FEF;
margin-right: 5px;
}

.breadcrumb ul li::after{
content: '\e5e1';
font-family: "Material Icons";
font-weight: 900;
color: #333;
padding: 0 0 0 10px;
font-size: 0.5rem;
display: table-cell;
vertical-align: middle;
}

.breadcrumb ul li:last-child::after{
content: '';
}

/* ===============================================================
フッター
================================================================== */
footer{
position: relative;
z-index: 10;
}
footer .section01{
text-align: center;
border-top: thin solid #ccc;
padding: 20px;
background-color: #fff;
}
footer .section02{
background-color: #000;
padding: 20px;
}

footer .section02 nav,
footer .section02 nav ul{
margin: 0;
padding: 0;
margin-left: auto;
margin-right: auto;
}

footer .section02 nav ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
width: 100%;
}

footer .section02 nav ul li{
width: 25%;
text-align: center;
margin-bottom: 1em;
}

footer .section02 nav ul li a:link,
footer .section02 nav ul li a:visited{
color: #fff;
text-decoration: none!important;
}

@media screen and (min-width: 560px) {
footer .section02 nav ul li a:hover{
color: #1CB3C3;
}
}

footer .copyright{
text-align: center;
background-color: #fff;
padding: 10px;
}

footer .copyright p{
margin: 0;
padding: 0;
}


/* [-] レスポンシブ対応
=========================================================================================== */


/* for - 960px
=========================================================================================== */
@media screen and (max-width: 959px) {

/* ===============================================================
モジュール
================================================================== */

.inner{
margin-left: auto;
margin-right: auto;
width: 90%;
}

/***************************** 画像 */

.img-pc{
display: none;
}

.img-tb{
display: block;
}



}
/* for - 560px
=========================================================================================== */
@media screen and (max-width: 559px) {

/* ===============================================================
モジュール
================================================================== */

/***************************** アニメーションエフェクト */

.A1,
.A2,
.A3,
.A4{
opacity: 1;
}


.slidein{
animation: slideIn 1s forwards ease;
}

@keyframes slideIn {
100% {transform: translateX(0);opacity: 1;}
}

.slidein-r{
animation: slideIn-r 1s forwards  ease;
}

@keyframes slideIn-r {
100% {transform: translateX(0);opacity: 1;}
}

.slideup{
animation: slideUp 1s forwards ease;
}

@keyframes slideUp {
100% {transform: translateY(0);opacity: 1;}
}

.slidedown{
animation: slidedown 1s forwards ease;
}

@keyframes slidedown {
100% {transform: translateY(0);opacity: 1;}
}

.fadein{
animation: fadein 1s forwards ease;
}
@keyframes fadein {
100% {opacity: 1;}
}

.d1 {animation-delay:1s;}
.d2 {animation-delay:1.1s;}
.d3 {animation-delay:1.2s;}
.d4 {animation-delay:1.3s;}


.flash{
  animation: flash 1s linear infinite;
}

@keyframes flash {
100% {opacity: 1;}
}

/***************************** 画像 */

.img-pc{
display: none;
}

.img-tb{
display: none;
}

.img-sp{
display: block;
}

.img-right{
float: none;
margin-left: auto;
margin-right: auto;
margin-bottom: 2em;
display: block;
}

/***************************** 改行 */
.br-pc{
display: none;
}

.br-sp{
display: block;
}

/***************************** ボタン */
.btn-style3{
text-align: center;
margin: 10px 10px 10px 10px;
}

/***************************** パンくず */

.breadcrumb {
display: none;
}

/* ===============================================================
フッター
================================================================== */
footer .section01{
font-size: 90%;
text-align: left;
}

footer .section02 nav ul{
justify-content: flex-start;
}

footer .section02 nav ul li{
width: 48%;
text-align: left;
}

}
/* for - 399px
=========================================================================================== */
@media screen and (max-width: 399px) {
}