@charset "UTF-8";

/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

:root {
  --main-color-right-blue: #01a4e3;
  --main-color-indigo: #233f7e;
}

/****************************
フォントのプロポーショナルメトリクスを適用
*****************************/
p,
h1,
h2,
h3,
h4 {
  font-feature-settings: "palt" 1;
  letter-spacing: 0.04em;
}

/* パンくずリストのホームアイコン非表示 */
#breadcrumb .p-breadcrumb__text .__home:before {
  display: none;
}

/********
スライダー
**********/
/*スマホでタップ時に出るハイライトを削除*/

[role="button"] {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
}

.loop-slider .swiper-wrapper {
  transition-timing-function: linear;
}

/*************************
 フェードインアニメーション 
***************************/
.js-fadein-trigger {
  opacity: 0;
}

.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
    transform: translateY(80px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/***********************
アルフレーム一覧のカラム組み調整
***********************/
/* 製品一覧CSSGrid*/
.grid-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 2em;
  text-align: center;
}

.product-card {
  padding: 0.5em 1em 2em;
  background: white;
  border-top: solid 5px var(--color_main);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
  width: 300px;
  margin: 0 auto;
  position: relative;
}

/*リストの横並び、色・枠線の色変更*/
.product-card dl {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding-top: 3em;
}

.product-card dd {
  background-color: #f4f4f4;
  border: 2px solid #fff;
  margin-left: 0;
  width: 65%;
  padding: 8px;
}

.product-card dt {
  background-color: var(--color_main);
  border: 2px solid #fff;
  color: #fff;
  width: 35%;
  padding: 8px;
}

.product-card .product-card_btn {
  width: 100%;
  position: absolute;
  bottom: 9em;
  left: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
}

/* ダウンロードボタン */
.btn-dl::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f56d";
  font-size: 1.5em;
  opacity: 1;
  display: inline-block;
  padding-right: 0.5em;
}

.btn-dl {
  padding: 3px 18px;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
  color: #fff;
}

.btn-dl--jww {
  background-color: var(--color_main);
  border-color: var(--color_main);
}

.btn-dl--jww:hover {
  background-color: transparent;
  color: var(--color_main);
}

/* deep04はテーマ側で設定しているオレンジ色 */
.btn-dl--dxf {
  background-color: var(--color_deep04);
  border-color: var(--color_deep04);
}

.btn-dl--dxf:hover {
  background-color: transparent;
  color: var(--color_deep04);
}

/**************************
 アイコン付きのアンカーリンク 
****************************/
.anker-link--icon a:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f063";
  display: inline-block;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  padding-right: 0.5em;
}

.anker-link--icon:hover a:before {
  transform: translateY(0.2em);
}

/************
取扱店舗一覧リスト
*************/

/* 店舗ごとの区切り線 */
.wp-block-group.shop-list {
  padding-bottom: 0.5em;
  margin-bottom: 2em;
  border-bottom: 1px solid var(--color_main);
}

/* 店舗名と住所のmargin */
.wp-block-group.shop-list h4 {
  margin-bottom: 0.5em;
}

/* 県ごとのグループのmargin */
.shop-list_prefacture {
  margin-bottom: 4em;
}
/* 地域のアンカーリンクリスト設定 */
.shop-area-link {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  padding: 0 !important; /*swellに元からついてるCSSを強制上書き*/
}

.shop-area-link li {
  border-right: 2px solid var(--color_main);
  padding: 0 0.8em;
}

.shop-area-link li a {
  color: var(--color_main);
}

/*********
メディアクエリ
**********/

/*画面サイズ959以下で適応*/
/* 
@media screen and (max-width: 959px) {
} */

/*画面サイズ599px以下で適応*/

@media screen and (max-width: 599px) {
  /* 2カラム表示でテキスト左、画像を右配置しているとき、
  sp表示では画像が上に来るようにする */
  .sp-column-reverse .swell-block-columns__inner {
    flex-direction: column-reverse;
  }
  /* topアルフレームとはのテキスト左右padding */
  .top-alframe-text {
    padding: 0 4vw;
  }
}