/*
Theme Name: 島田昌
Description: 大阪府吹田市の株式会社島田昌ではバラン、造花、新鮮生シート、各種ケースの製造・販売を行っています。
Version: 1.0.0
Author: MoVE Inc.
*/


/*------------------------------------------
  Responsive Grid Media Queries - 1280, 1024, 768, 480
   1280-1024   - デスクトップ（デフォルトのグリッド）
   1024-768    - タブレット横長
   768-480     - タブレット縦長
   480-less    - スマホ
--------------------------------------------*/
@media all and (min-width: 1024px) and (max-width: 1280px) { }
@media all and (min-width: 768px) and (max-width: 1024px) { }
@media all and (min-width: 480px) and (max-width: 768px) { }
@media all and (max-width: 480px) { }
/*------------------------------------------*/

.zoom {
overflow: hidden;
width: 100%;
height: 100%;
background: #fff;
}
.zoom img {
display: block;
transition-duration: 0.5s;
}
.zoom img:hover {
transform: scale(1.1);
transition-duration: 1.0s;
opacity: 0.6;
}

header {
position: sticky;
top: 0px;
z-index: 9999;
background: rgba(255,255,255,0.8);
backdrop-filter: saturate(180%) blur(20px);
}

img {
width: 100%;
}

/* Optional 100 more bytes */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 3em 0 1em;
}
/*
p,
ul,
ol {
  color: #1d1d1d;
  margin-bottom: 2em;
}
*/


@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&family=Roboto:wght@700&display=swap');
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
line-height: 1;
font-size: 1.0rem;
color: #333;
}
h2 {
font-size: 2.0rem;
}
@media screen and (max-width:767px) {
h2 {
font-size: 1.3rem;
}
}

p {
line-height: 1.6rem;
}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a:hover{
text-decoration: none;
}
.pagetitle {
    display: none;
}
li {
    list-style: none;
}
img {
width:100%;
}

.lb {
font-size: 2.4rem;
font-weight: bold;
}
@media all and (min-width: 480px) and (max-width: 768px) {
.lb {
font-size: 1.8rem;
font-weight: bold;
}
}

a.widelink { display: block; }

.mt_10 {
padding-top: 10%;
}

/*==================================================
スライダーのためのcss
===================================*/
#slider {
    width: 100%;
    height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

/*========= レイアウトのためのCSS ===============*/

#slider a{
    color: #fff;
}

#slider a:hover,
#slider a:active{
    text-decoration: none;
}

#slider h1 {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size:2vw;
    color: #fff;
    line-height: 3rem;
}
#slider h1 img{
    width: 25%;
}
.wrapper h2 {
    position: absolute;
    z-index: 2;
    bottom: -13%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.news_block {
    padding: 5%;
}
.news_title {
    display: flex;
    justify-content: center;
    align-items: center;
}
.news_title_up {
color: #36863D;
}
.news li {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    border-bottom: 1px dotted #D5D5D5;
    line-height: 3.0rem;
}
.wp-block-latest-posts__post-date {
    padding-right: 3%;
}
.wp-block-latest-posts__post-title {
}

.shop_column {
    position: relative;
}
.shop_column li {
}
.shop_column a {
    text-decoration: none;
    color: white;
} 
.shop_column figcaption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
    width: 80%;
    text-align: center;
}



/*==================================================
shopinformation 画像拡大
===================================*/
.shopinformation {
position: relative;
}
.shopinformation h2 {
color: white;
width: 100%;
font-size: 1.0rem;
line-height: 1.2rem;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
z-index: 2;
}
.shopinformation .small{
font-size: 0.8rem;
}
.shopinformation img{
width:100%;
height: auto;
transform: scale(1);
transition: .5s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
filter: brightness(0.7);
border-bottom-right-radius: 20px;
border-top-left-radius: 10px;
}
.shopinformation a:hover img{/*hoverした時の変化*/
transform: scale(1.2);/*拡大の値を変更したい場合はこの数値を変更*/
filter: brightness(0.5);
}
/*　画像のマスク　*/
.mask{
display: block;
line-height: 0;/*行の高さを0にする*/
overflow: hidden;/*拡大してはみ出る要素を隠す*/
}


/*-----------------------------------------------------------*/
/* Loading背景画面設定　*/
#splash {
/*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 10;
  background:#36863D;
  text-align:center;
  color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:260px;
}

/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/*==================================================
Home
===================================*/
.site_title {
  display: grid;
  place-items: center;
}
.catchcopy P {
line-height: 3rem;
color: white;
}
@media screen and (max-width:767px) {
.catchcopy P {
line-height: 3rem;
font-size: 18px!important ;
}
}

.catchcopy P img{
max-width: 550px;
}
.site-logo  {
max-width: 70%;
}

.hl_2 {
text-align: center;
margin: 50px 0;
}
@media screen and (max-width:767px) {
.hl_2 {
margin: 20px 0;
}
}

.text_border {
text-align: center;
position: relative;
padding: 0.5rem 0;
border-bottom: 1px solid #36863D;
display: inline-block;
color: #36863D;
}
.text_border:before,
.text_border:after {
position: absolute;
left: 50%;
content: "";
height: 0;
width: 0;
}
.text_border:before {
top: 100%;
border: 9px solid;
border-color: transparent;
border-top-color: #36863D;
margin-left: -9px;
}
.text_border:after {
top: 99%;
border: 8px solid;
border-color: transparent;
border-top-color: white;
margin-left: -8px;
}
.text_border2:after {
top: 99%;
border: 8px solid;
border-color: transparent;
border-top-color: #EDF3B4;
margin-left: -8px;
}
.column_2 p {
padding: 5% 0;
}

.bg_baran {
width: 100%;
height: 400px;
padding-top: 10%;
background-color: white;
background-image: url(assets/images/bg_01.png),url(assets/images/bg_02.png);
background-size: 20%,23%;
background-repeat: no-repeat,no-repeat;
background-position: top 50% right -2%,top left -4%;
}
@media screen and (max-width:767px) {
.bg_baran {
width: 100%;
height: 400px;
padding-top: 5%;
background-color: white;
background-image: url(assets/images/bg_01.png),url(assets/images/bg_02.png);
background-size: 40%,40%;
background-repeat: no-repeat,no-repeat;
background-position: top 50% right -2%,top left -4%;
background-color:rgba(255,255,255,0.8);
background-blend-mode:lighten;
}
}
.bg_baran p {
padding: 0 25% 0;
line-height: 2.0;
}
@media screen and (max-width:767px) {
.bg_baran p {
padding: 0 10%;
line-height: 1.6;
}
}

/*最新の投稿*/
.wp-block-latest-posts__list li {
display: flex;
flex-direction:column-reverse;
padding-bottom: 1%;
padding-top: 1%;
border-bottom: 1px dotted #707070;
line-height: 1.2rem;
}
.wp-block-latest-posts__list li a:hover {
text-decoration: underline;
}
@media screen and (max-width:767px) {
.wp-block-latest-posts__post-title {
display: flex;
flex-direction:column-reverse;
}
.wp-block-latest-posts__post-date {
display: flex;
}
}


/*-----------------------*/
.flexbox {
  display: flex;
  flex-wrap: wrap;
  padding: 0.4em;
  margin: 0 0 2em;
}
.flexbox > div {
  background: #ddd;
  padding: 1em;
  flex: 1 0 200px;
  margin: 0.4em;
}
/*-----------------------*/
.item_box {
text-align: center;
margin: 0 10%;
}
.item_box p {
text-align: center;
background-color: aqua;
}
.column_1 {
  background-color: #FDF7EB;
  margin: 0;
  color: white;
  display: flex;
  text-align: center;
  padding: 5% 10%;
  position: relative;
}
.column_1::after{
  content: "";
  position: absolute;
  background: linear-gradient(45deg, white 50%, transparent 52%),
      linear-gradient(315deg, white 50%, transparent 52%);
  background-size: 30px 30px;
  height: 30px;
  width: 100%;
  bottom: 0;
}
.column_1_1 {
border: solid 2px #36863D;
background-color: yellow;
border-radius: 3%;
margin: 0;
padding: 0;
}
.column_1_1 p {
background-color: #36863D;
margin: 0;
padding: 0;
}
.column_2 {
  margin: 0 10%;
  display:flex;
}
.column_2_1 {
  padding: 5%;
}
.column_2_2 {
  padding: 5%
}
.col {
  padding: 15px;
}
@media screen and (min-width: 768px) {
.reverse {
  display: flex;
  flex-direction: row-reverse;
  }
}

.column_3 {
 background-color: #36863D;
 margin: 0;
 color: white;
 display: flex;
 text-align: center;
 padding: 10% 0;
 position: relative;
}
.column_3::after{
  content: "";
  position: absolute;
  background: linear-gradient(45deg, #FCFFDB 50%, transparent 52%),
      linear-gradient(315deg, #FCFFDB 50%, transparent 52%);
  background-size: 30px 30px;
  height: 30px;
  width: 100%;
  bottom: 0;
}

.column_3_left,
.column_3_right {
color: white;
}

/*== ボタン共通設定 */
.btn{
/*アニメーションの起点とするためrelativeを指定*/
position: relative;
overflow: hidden;
/*ボタンの形状*/
text-decoration: none;
display: inline-block;
border: 1px solid #36863D;/* ボーダーの色と太さ */
padding: 2% 30%;
text-align: center;
outline: none;
/*アニメーションの指定*/   
transition: ease .2s;
}

/*ボタン内spanの形状*/
.btn span {
position: relative;
z-index: -10;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
color:#36863D;
}

.btn:hover span{
  color:#fff;
}

/*== 背景が流れる（左から右） */
.bgleft:before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
    /*色や形状*/
  background:#36863D;/*背景色*/
  width: 100%;
  height: 100%;
    /*アニメーション*/
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}

/*hoverした際の形状*/
.bgleft:hover:before{
  transform-origin:left top;
  transform:scale(1, 1);
}

.test_navi {
  background-color: #FDF7EB;
padding: 5% 0;
}


.giza {
  background-color: #EDF3B4;
  margin: 0;
  color: white;
  display: flex;
  text-align: center;
  position: relative;
}
.giza::after{
  content: "";
  position: absolute;
  background: linear-gradient(45deg, white 50%, transparent 52%),
      linear-gradient(315deg, white 50%, transparent 52%);
  background-size: 30px 30px;
  height: 30px;
  width: 100%;
  bottom: 0;
}



.example {
  position: relative;
  width: 80%;
}
.example a {/*aタグを画像の真ん中に*/
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  padding: 3% 0;
  background-color: white;
  background: rgba(255, 255, 255, 0.7);/*背景を半透明に*/
}

.example a:hover{/*カーソルを当てたとき*/
  background: rgba(255, 255, 255, 0.3);/*背景を半透明に*/
  }
@media screen and (max-width:767px) {
.example figure {
}
}



.example2 {
  position: relative;
  width: 80%;
}
.example2 a {/*aタグを画像の真ん中に*/
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  padding: 3% 0;
  background-color: white;
  background: rgba(255, 255, 255, 1.0);/*背景を半透明に*/
}
.example2 a:hover{/*カーソルを当てたとき*/
  background: rgba(255, 255, 255, 1.0);/*背景を半透明に*/
}
.example2 p:first-child {
margin-bottom: 5%;
}
  .arrow{
  width: 10em;
  position: relative;
  display: inline-block;
  color: #000;
  vertical-align: middle;
  text-decoration: none;
  font-size: 1em;
}

.arrow::after{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 3%;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 0.4em;   /* arrow size */
  height: 0.4em;  /* arrow size */
  border-top: 1px solid #36863D;  /* thickness, color */
  border-right: 1px solid #36863D;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

footer {
background-color: #FCFFDB;
}
.footer_navi {
padding: 5% 3%;;
}
.footer_navi .wp-block-column:first-child {
margin-bottom: 2%;
}
.footer_navi .menu {
width: 250px;
}
.footer_navi .menu li {
line-height: 2.0rem;
}
.footer_navi .wp-block-column li::before {
content: "◉";
font-weight: 900;
margin-right: 1%;
color: #36863D;
}
footer a:hover {
opacity: 0.4;
transition: 0.5s;
}

.copyright {
padding: 1% 0;
text-align: center;
font-size: small;
}
/*
.column_3 {
	padding: 135px 5px;
	background-image: repeating-linear-gradient(to right,#cacaca, #cacaca 1px, transparent 0, transparent 33.3px);
}
*/

/*header navi--------------------------------------------*/
.header{
width: 100%;
display: flex;
z-index: 1;
postion: -webkit-sticky;
position: sticky;
top: 0;
border-bottom: 1px solid #E9E9E9;
}

/* header固定のため余白をつける。メニューのCSSには関係ない */
.main{  
  margin-top: 60px;
}

@media only screen and (max-width: 768px) {
.header_inner{
display: flex;
width: 100%;
height: 7vh;
}
.header_inner .logo img {
padding-top: 8px;
width: 50%;
}
.nav {
position: fixed;
right: -320px; /* 右から出てくる */
top: 0;
width: 300px; /* スマホに収まるサイズ */
height: 100vh;
padding-top: 60px;
background-color: #FCFFDB;
transition: all .6s;
z-index: 9999;
overflow-y: auto; /* メニューが多くなったらスクロールできるように */
}
.hamburger {
position: absolute;
right: 15px;
top: 8px;
width: 40px; /* クリックしやすい幅 */
height: 40px; /* クリックしやすい高さ */
cursor: pointer;
z-index: 999999999;
}
.nav_list {
margin: 0;
padding: 0;
list-style: none;
}

.nav_list li {
    padding: 5% 0 5% 5%;
    border-bottom: 1px dotted #333;
}

.nav_item {
text-align: center;
padding: 0 14px;
}
.nav_item a {
display: block;
padding: 8px 0;
border-bottom: 1px solid #eee;
text-decoration: none;
color: #333;
}
.nav_item a:hover {
background-color: #eee;
}
.hamburger_border {
position: absolute;
left: 11px;
width: 18px;
height: 2px;
background-color: #333;
transition: all .6s;
}
.hamburger_border_top {
top: 14px;
}
.hamburger_border_center {
top: 20px;
}
.hamburger_border_bottom {
top: 26px;
}
.black_bg {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 100;
background-color: #333;
opacity: 0;
visibility: hidden;
transition: all .6s;
cursor: pointer;
}

  /* 表示された時用のCSS */
.nav-open .nav {
right: 0;
}
.nav-open .black_bg {
opacity: .8;
visibility: visible;
}
.nav-open .hamburger_border_top {
transform: rotate(45deg);
top: 20px;
}
.nav-open .hamburger_border_center {
width: 0;
left: 50%;
}
.nav-open .hamburger_border_bottom {
transform: rotate(-45deg);
top: 20px;
}

}/* sp */



@media only screen and (min-width: 769px) {
.header_inner{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 0 2%;
}
.logo {
width: 30%;
}
nav {
width: 100%;
display: flex;
justify-content: flex-end;
}
.navi ul {
  position: sticky;
  display: -webkit-box;
  display: flex;
  justify-content: center;
}
.navi ul li {
  padding: 1.5rem 0.7rem;
}
.navi li a {
  position: relative;
  display: block;
  color: #333;/* 文字色 */
  padding: 10px 0;
  text-decoration: none;
}
.navi li a::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  display: block;
  width: 0px;
  height: 2px;
  background-color: #36863D;
  margin: 0 auto;
  transition: 0.3s;
  transform: translateX(-50%);
}
.navi li a:hover::after {
  width: 100%;/* 下線の長さ */
}


}/* pc */


/*企業情報--------------------------------------*/

.dlTable {
margin: 5% auto;
width: 80%; /* テーブルの横幅を500pxに指定 */
border-top: 1px solid #ddd; /* テーブルの上の線 */
display: flex; /* 子要素のdtとddを横並びにする */
flex-wrap: wrap; /* 1つのdtとddで1行になるよう改行させる */
}
.dlTable dt,
.dlTable dd {
line-height: 1.4rem;
border-bottom: 1px solid #ddd; /* 各セルの下の線。テーブルの下の線も補える。 */
box-sizing: border-box; /* widthの計算を楽にするため */
padding: 15px 30px; /* 各セルに余白を取る */
}
.dlTable dt {
width: 200px; /* dt（見出し項目）の横幅を200pxに指定 */
}
.dlTable dd {
width: calc(100% - 200px); /* テーブル幅からdtを引いた分の横幅を指定。 */
}

/* FOR smartphone landscape
***************************************************************************/
@media screen and (max-width:750px) {
.dlTable {
width: 100%; /* 横幅をpxではなく、幅いっぱいに指定。 */
border-left: none; /* テーブルの左の線を消す */
display: block; /* 横並びにさせないようブロック要素にする */
}
.dlTable dt,
.dlTable dd {
border-right: none; /* セルの右の線を消す */
width: 100%; /* 横幅を幅いっぱいに指定 */
padding: 10px 15px; /* 各セルに余白を取る */
}
.dlTable dt {
border-bottom: none; /* 下の線を消す（ddの下の線が残る） */
padding-bottom: 0; /*ddとの距離を近づけるため、0にする*/
}
}




/* Contact
-----------------------------------------------------------------*/

/* Contact Form7 */

.contact7 {
width: 90%;
box-sizing: border-box;
}
.contact7 dd {
margin: 0 0 30px 0;
}
.contact7 dt {
font-weight: normal;
margin-bottom: 1%;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
textarea {
  background: #f8f8f8;
  display: block;
  font-size: 16px;
  padding: 12px 15px;
  width: 100%;
  transition: 0.8s;
  border-radius: 0;
}
input[type="number"] {
  background: #f8f8f8;
  display: block;
  font-size: 16px;
  padding: 12px 15px;
  width: 20%;
  transition: 0.8s;
  border-radius: 0;
}
/* 必須マーク */
.contact7 .must {
	background: #FF1A00;
}

/* 任意マーク */
.contact7 .optional {
	background: #999;
}

.contact7 .must,
.contact7 .optional {
	color: #FFF;
	border-radius: 3px;
	font-size: 10px;
	margin-left: 10px;
	padding: 5px 10px;
	letter-spacing: 2px;
}
.btn_contact7 {
text-align: center;
padding: 5%;
}
.btn_contact7 input {
padding: 2%;
width: 50%;
height: 30%;
background-color: #36863D;
color: #FFF;
font-size: 1.1em;
letter-spacing: 0.2em;
border: 1px solid #36863D;
 -webkit-transition: 0.3s;
 -moz-transition: 0.3s;
 -o-transition: 0.3s;
 -ms-transition: 0.3s;
transition: 0.3s;	
}
@media only screen and (max-width: 768px) {
.btn_contact7 input {
padding: 2%;
width: 100%;
height: 30%;
background-color: #36863D;
color: #FFF;
font-size: 1.1em;
letter-spacing: 0.2em;
border: 1px solid #36863D;
 -webkit-transition: 0.3s;
 -moz-transition: 0.3s;
 -o-transition: 0.3s;
 -ms-transition: 0.3s;
transition: 0.3s;	
}
}

.btn_contact7 input:hover {
background-color: #FFF;
color: #36863D; 
}
.form-width { max-width: 100%;}

/*サンプル*/

/*サンプルここまで*/


/*Privacy*/
.privacy_list li {
line-height: 1.8rem;
}
.privacy_list li li {
list-style: decimal;
margin-left: 3rem;
}

/*quality-----------------------------------*/
.factory_content {
max-width: 1100px;
position: relative;
z-index: -5;
padding: 0 5%;
margin: -120px auto 0;
}
.factory_content p {
font-size: 15px;
font-size: 0.9375rem;
letter-spacing: 0.05rem;
text-align: center;
box-sizing: border-box;
margin: 10px auto 0;
background: #fff;
}
.factory_content {
padding: 0 8%;
margin: -80px auto 0;
}
.factory_content > p {
font-size: 13px;
font-size: 0.8125rem;
letter-spacing: 0.05rem;
text-align: justify;
}

.quality_title .inner {
width: 90%;
min-height: 70px;
position: absolute;
top: 50%;
left: 50%;
 -webkit-transform: translate(-50%, -85%);
 -ms-transform: translate(-50%, -85%);
transform: translate(-50%, -85%);
}
.quality_title.__factory .inner p {
text-align: center;
margin: 10px auto 0;
}
.quality_title {
min-height: 340px;
overflow: hidden;
position: relative;
padding-top: 30%;
margin: 120px auto 0;
box-sizing: border-box;
}
.quality_title h2 {
color: #000;
line-height: 1;
position: relative;
font-size: 25px;
font-size: 1.5625rem;
white-space: nowrap;
letter-spacing: 0.4rem;
font-weight: normal;
text-align: center;
padding: 0 0 0 0.4rem;
margin: 0 auto;
}
.quality_title h2:after {
content: "";
display: block;
width: 60px;
height: 1px;
background: #5B656B;
margin: 15px auto 0;
box-sizing: border-box;
 -webkit-transform: translateX(-0.2rem);
 -ms-transform: translateX(-0.2rem);
transform: translateX(-0.2rem);
}
.quality_title p {
font-size: 15px;
font-size: 0.9375rem;
letter-spacing: 0.1rem;
text-align: center;
padding: 0 0 0 0.1rem;
margin: 20px auto 0;
}
.quality_title.__factory {
background: url("assets/images/bg_factory.jpg") no-repeat center center/cover;
z-index: -10;
}
.quality_title.__factory_nara {
background: url("assets/images/bg_factory_nara.jpg") no-repeat center center/cover;
z-index: -10;
}


/*==================================================
ふわっ
===================================*/
/* スクロールCSS */
.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}
.fade-in-up {
  transform: translate(0, 50px);
}
.fade-in-down {
  transform: translate(0, -50px);
}
.fade-in-left {
  transform: translate(-50px, 0);
}
.fade-in-right {
  transform: translate(50px, 0);
}
.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}

/*recruit-------------------------*/
.recruit_headline {
line-height: 2.5rem;
}

/*  season ----------------------*/
.item_table table td {
border-bottom: 1px dotted #000000 !important;
}
.item_table table td:first-child {
border-right: 1px dotted #000000 !important;
}
/* item--------------------------*/
.item_navi_title {
display: flex;
justify-content:center; /* 水平方向 */
align-items: center; /* 垂直方向 */
}
@media only screen and (max-width: 769px) {
.item_navi_title {
padding-top: 2%;
font-size: large;
}
}

.item_navi {
padding: 5px 0;
}
@media only screen and (max-width: 769px) {
.item_navi {
border-bottom: 1px dotted black;
padding-left: 2%;
}
}

.item_navi .container {
display:flex;
align-items: center; /* 垂直方向 */
}
.item_navi img {
background-color: white;
border-radius: 50%;  /* 角丸半径を50%にする(=円形にする) */
width:  50px;       /* ※縦横を同値に */
height: 50px;       /* ※縦横を同値に */
}
.item_navi p {
margin-left: 1rem;
}
.img-container{
  display:flex;/* flexbox */
  justify-content:center; /* 水平方向 */
  align-items: center; /* 垂直方向 */
}
.img-container img{
width: 20%;
}

.recruit_top {
z-index: -10;
}

.form1 {
flex-wrap: wrap;
}
.wpcf7-list-item {
margin: 0;
}
.wp-container-5 {
background-color: #36863D;
color: white;
}
.recruit_department img {
border-radius: 50%;
border: 10px solid #EDF3B4;
}
.btn_dl {
color: white;
background-color: #36863D;
padding: 3px 10px;;
border-radius: 20px;
}

/*single*/
#template-single {
padding: 10%;
}
.entry-date {
margin-bottom: 2%;
}
.entry-content {
margin-bottom: 10%;
}
.post-navigation {
display:flex;
justify-content: center;
}
.post-navigation li {
padding: 1% 2%;
}
.post-navigation a {
width: 10%;
height: 5%;
text-decoration: underline;
}

/*画像切り替え*/
.pc-img { display: inline-block!important; }
.sp-img { display: none!important; }
.margin_05 {
padding: 0 5%;
display: flex;
justify-content: center;
align-items: center;
}
 
@media only screen and (max-width: 768px) {
    .pc-img { display: none!important; }
    .sp-img { display: inline-block!important; }
    .margin_05 {
    padding: 0 5%;
    }
}

/*sotowaku*/
.waku_red {
    border: 2px solid red;
    color: red;
    font-weight: bold;
}