/*
Theme Name: (C)YoshiJosefToomuch
Theme URI: 
Description: Original Theme by YoshiJosefToomcuh
Version: 1.1
Author: YoshiJosefToomcuh
Author URI: https://showaindustry.co.jp
*/

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 12px;
  color: #333333;
  /*text-align: justify;*/
  letter-spacing: 0.1em;
}

.wrapper {
  margin: 0 auto;
  width: 100%;
}

.main {
  padding: 5%;
  line-height: 1.8em;
}

.content {
  padding: 3%;
}

img {
  width: 100%;
}

h4 {
  color: #111111;
  letter-spacing: 0.05em;
}

h5 {
  font-size: 50px;
  text-align: center;
  font-family: serif;
  line-height: -1.5em;
  color: #ffffff;
}

@media screen and (max-width: 480px) {
  h5 {
  font-size: 20px;
  }
}


h6 {
    padding: 0.8rem 0;
    margin-bottom: 0.2rem;
    background-image: linear-gradient(90deg, #1c3e60 0 20%, #dedede 20%);
    background-repeat: no-repeat;
    background-size: 100% 5%;
    background-position: bottom;
    color: #323232;
    font-weight: bold;
    font-size: 20px;
}

h6 small {
  font-size: 8px;
}

hr {
  border-top: 1px dotted #333333;
}

li {
list-style:none;
/*デフォルトの指定解除*/
float:left;
}

/* ---------- vertical2 ---------- */
*, *:before, *:after {
  box-sizing: border-box;
}
.c2 {
  width: 100%;
  display: flex;
  display: -ms-flexbox; /* IE10 */
  flex-wrap: wrap;
  -ms-flex-wrap: wrap; /* IE10 */
}

.c2 > div{
  width: -webkit-calc(100% /2);
  padding: 3%;
}
@media screen and (max-width: 960px) {
  .c2 > div{
    width: 50%;
  }
}
@media screen and (max-width: 480px) {
  .c2 > div{
    width: 100%;
    padding: -2%;
  }
}

/* ---------- vertical3 ---------- */
*, *:before, *:after {
  box-sizing: border-box;
}
.c3 {
  width: 100%;
  display: flex;
  display: -ms-flexbox; /* IE10 */
  flex-wrap: wrap;
  -ms-flex-wrap: wrap; /* IE10 */
}

.c3 > div{
  width: -webkit-calc(100% /3);
  padding: 3%;
}
@media screen and (max-width: 960px) {
  .c3 > div{
    width: 50%;
  }
}
@media screen and (max-width: 480px) {
  .c3 > div{
    width: 100%;
    padding: -2%;
  }
}

/* ---------- vertical ---------- */
.vertical {
  writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode:vertical-rl;  
}

.rightside {
        position: absolute;
        right: 0;
        padding: 40px;
    }

.rightsidefixed {
        position: fixed;
        right: 0;
        padding: 40px;
    } 

/* ---------- line up in a row ---------- */
  .side {
        display: flex; /* 子要素を横並びにする */
        align-items: center; /* 文字の高さを中央で揃える */
        /* または align-items: baseline; で基線で揃える */
        gap: 5px; /* 文字と文字の間隔を調整 */
    }


/* ---------- box design ---------- */
.box-with-arrow {
    position: relative; /* 子要素の配置の基準にする */
    width: 100%;
    height: 70px;
    background-color: #1c3e60;
    color: white;
    text-align: center;
    line-height: 70px; /* 中央寄せのため */
    margin: 50px auto; /* 中央寄せのため */
    border-radius: 10px; /* 必要に応じて角を丸める */
}

.box-with-arrow::after {
    content: ''; /* 擬似要素には必須 */
    position: absolute;
    bottom: -20px; /* ボックスの下に配置 */
    left: 50%; /* 中央揃えのため */
    transform: translateX(-50%) rotate(360deg); /* 水平中央揃えと回転 */
    width: 0;
    height: 0;
    border-left: 20px solid transparent; /* 三角の底辺を透明にする */
    border-right: 20px solid transparent; /* 三角の底辺を透明にする */
    border-top: 20px solid #1c3e60; /* 背景色と同じ色で三角の頂点を作成 */
}

/* ---------- top image ---------- */
.main-visual {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   background: url('https://showaindustry.co.jp/wp-content/themes/my_theme/images/s001.jpg') top center / cover no-repeat;
}

.small {
  font-size: 10px;
  font-style: normal;
}


/* 下からフェードイン */
.slide-bottom {
   opacity: 0;
   transform: translate(0, 20px);
   transition: all 1.5s ease-out;
 }

 /* 画面外にいる状態 */
.fadein {
  opacity : 0.1;
  transform : translate(0, 50px);
  transition : all 500ms;
  }

/* 画面内に入った状態 */
.fadein.scrollin {
  opacity : 1;
  transform : translate(0, 0);
  }

/* ---------- table design ---------- */
  .table_design01 {
  border-collapse: collapse;
  width: 100%;
}
.table_design01 th, .table_design01 td {
  border: 2px solid #ffffff;
  background-color: #1c3e60;
  padding: 1em;
  color: #ffffff;
  font-size: 12px;
}
@media screen and (max-width: 480px) {
  .table_design01 th, .table_design01 td > div {
    font-size: 90%;
  }
}

.table_design01 th {
  background-color: #255483;
  color: #ffffff;
  text-align: left;
  font-weight: normal;
  width: 33%;
  min-width: 4em;
}
@media screen and (max-width: 480px) {
  .table_design01 th > div {
    font-size: 90%;
  }
}

/* ---------- footer ---------- */
.footer {
  padding: 3%;
  color: #ffffff;
  background: #1c3e60;
}

.footer__logo {
  display: inline-block;
  margin-bottom: 1rem;
}

.footer__logo img {
  max-width: 150px;
  width: 100%;
}


.head__logo {
        position: absolute; /* 親要素からの絶対位置を指定 */
        top: 10; /* 親要素の上端に配置 */
        left: 10; /* 親要素の左端に配置 */
        max-width: 150px;
        width: 100%;
        height: auto;
    }

.head__tel {
        position: absolute; /* 親要素からの絶対位置を指定 */
        top: 10; /* 親要素の上端に配置 */
        right: 10; /* 親要素の左端に配置 */
        max-width: 150px;
        width: 100%;
        height: auto;
    }


/* ---------- mail ---------- */
.btnh {
    padding: 10px 15px;
    color: #1c3e60 !important;
    display: inline-block;
    background-color: transparent;
    border: 0.1px solid #1c3e60;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.btnh:hover {
    background-color: #1c3e60;
    border: 0.1px solid #1c3e60;
    color: #ffffff !important;
}