/*
Theme Name: TYDKK Scratch
Author: HORIKAWA Koichi
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary - for tydkk.com use only
License URI: None
Text Domain: tydkk-scratch
*/
@charset "utf-8";

/*--- definition ---*/
:root {
  --base-font-size: 16px; /* default, medium */
  --cl-azzurro: #006bb2;
  --cl-skyblue: #8cc1de;
  --my-dark-skyblue: #1969bc;
  --my-skyblue: #00b4f0;
  --my-light-skyblue: #c7eafb; /*#a8dff9;*/ /*#d3effc;*/
  --my-black: #000000;
  --my-dark-gray: #333333;
  --my-gray: #8c8c8c;
  --my-light-gray: #b8b8b8;
  --my-white: #ffffff;
  --my-red: #ff0000;
  --nav-hover: #ffffff; /*orange; /* TEMP */
  --nav-background: #eeeeee;
  --main-hover: orange; /* 要検討 */
  --font-base: "Meiryo", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  --font-ui: "Meiryo UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

/*--- 開発メモ ---*/
.memo {
  box-sizing: border-box;
  max-width: 65rem;
  margin: 1rem 0;
  padding: 0.5rem;
  border: 2px solid red;/*black;*/
  border-radius: 0.5rem;
  background: pink;/*lightgray;*/
}
.memo::before {
  content: "■開発メモ■";
  font-weight: bold;
}

/*--- reset ---*/
* {
  margin: 0px;
  padding: 0px;
}

/*--- generic ---*/
html,
body {
  width: 100%;
  height: 100%;
  font-family: var(--font-base);
  font-size: var(--base-font-size);
  color: var(--my-dark-gray);
}

/*--- layout ---*/
.container {
  display: flex;
  flex-direction: column;
  max-width: 75rem;
}
.nav-main {
  display: flex;
  flex-direction: row;
}

/*--- header ---*/
header {
  display: flex;
  flex-direction: row;
}
header .logo-address-hdborder {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
header .logo-address {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  justify-content: space-between;
  align-items: flex-end;
  padding: 1rem 1rem 0.5rem;
}
header .logo {
  display: flex;
  align-items: flex-end;
}
header .logo-mark {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 5rem;
  min-width: 5rem;
  min-height: 5rem;
  margin-right: 1rem;
}
header .logo-mark img {
  display: block;
  width: 100%;
  height: 100%;
}
header .logo-type {
  display: flex;
  align-items: flex-end;
  font-size: 2rem;
  font-weight: bold;
}
header .address {
  font-size: 1rem; /* 空のルールセットは使用してはいけないので影響のないモノを記述しておく */
}
/* font size switcher */
header .font-size-switcher {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 0.8rem;
}
header .font-size-switcher-label {
  font-size: 0.7rem;
  margin-right: 0.2rem;
}
header .font-size-switcher-option {
  display: flex;
  flex-direction: row;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--my-skyblue);
  border-radius: 9999px;
}
header .font-size-switcher-option-large, .font-size-switcher-option-medium, .font-size-switcher-option-small {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 0.2rem;
  border-radius: 50%;
  background: var(--cl-azzurro);
  color: var(--my-white);
}
/* address */
header .address-text {
  font-size: 0.9rem;
  line-height: 0.9rem;
}
header .address-info {
  font-size: 0.8rem;
}
header .hdborder {
  height: 1.5rem;
  background: linear-gradient(var(--my-light-skyblue), var(--my-skyblue));
}

/*--- nav ---*/
/* sidebar menu */
nav {
  background: var(--nav-background); /* TEMP light light gray */
  font-family: var(--font-ui);
}
nav ul {
  text-align: center;
  list-style: none;
}
nav ul li {
  width: 8rem;
  margin: 1rem;
}
nav ul li a {
  display: block;
  padding: 0.5rem;
  background: linear-gradient(var(--my-skyblue), var(--my-light-skyblue));
  border-radius: 0.5rem;
  color: var(--my-white);
  text-decoration: none;
  text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
}
nav ul li a:hover {
  background: linear-gradient(var(--cl-azzurro), var(--cl-skyblue));
  color: var(--nav-hover);
}

/*--- main ---*/
main {
  flex-grow: 1;
}
main article {
  margin: 2rem;
}
/* header image */
main .header-img {
  /* max-width: 90rem; 最大幅 */
  margin-bottom: 2rem;
}
main .header-img img {
  display: block;
  max-width: 100%; /* 親要素の幅を超えないようにする */
  height: auto; /* アスペクト比を維持する */
}
/* h1 - h6 */
main h1 {
  font-size: 2rem;
  font-weight: bold;
  line-height: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
main h2 {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  padding-left: 0.5rem;
  border-left: 1rem solid var(--cl-azzurro);
}
main h3 {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.2rem;
  margin-bottom: 1rem;
}
main h4 {
  font-size: 1rem;
  font-weight: bold;
  line-height: 1rem;
  margin-bottom: 1rem;
}
main h5 {
  font-size: 1rem;
  font-weight: bold;
  line-height: 1rem;
  margin-bottom: 1rem;
}
main h6 {
  font-size: 1rem;
  font-weight: bold;
  line-height: 1rem;
  margin-bottom: 1rem;
}
/* paragraph */
main p {
  font-size: 1rem;
  line-height: 1.75rem;
  margin-bottom: 1rem;
}
main .layout-left {
  max-width: 40rem;
  margin-right: 30%;
}
/* strong as keyword */
main strong {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--cl-azzurro);
}
/* emphasis */
main em {
  font-weight: bold;
  font-style: normal;
  color: var(--my-red);
}
/* list */
main ul, main ol {
  margin-bottom: 1rem;
}
main ul li, main ol li {
  margin-left: 1.5rem;
  padding-left: 0.5rem;
}
main ul li {
  list-style-type: square;
}
main ul li ul li {
  list-style-type: circle;
}
main ol li {
  list-style-type: decimal;
}
main ol li ol li {
  list-style-type: lower-alpha;
}
/* link */
main a {
  text-decoration: none;
  color: var(--cl-azzurro);
}
main a:hover {
  color: var(--main-hover);
  text-decoration: underline;
}
/* text & picture */
main .text-picture {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
main .text-picture-text {
  margin-right: 1rem;
}
main .text-picture-img {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
main .text-picture-img img {
  width: 18rem;
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
}
/* solution box */
main .sol {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
main .sol-container {
  margin: 1.5rem 0;
}
main .sol-box {
  display: block;
  position: relative; /* 子要素の基準位置にする */
  width: 16rem;
  height: 12rem;
  border-radius: 0.5rem;
  color: var(--my-white);
  cursor: pointer;
}
main .sol-title {
  font-size: 1.5rem;
  padding-top: 0.5rem;
  text-align: center;
}
main .sol-text {
  font-size: 1.2rem;
  line-height: 1.5rem;
  margin: 1rem 2rem;
  opacity: 0;
}
main .sol-img {
  position: absolute; /* 絶対位置にして浮かす */
  top: 0;
  left: 0;
  width: 100%; /* 親要素の幅にぴったり合わせる */
  height: 100%; /* 親要素の幅にぴったり合わせる */
  border-radius: 0.5rem;
  background: var(--cl-azzurro);
  z-index: -1
}
main .sol-box img {
  position: relative; /* z-indexを有効にするため */
  width: 100%; /* 親要素の幅にぴったり合わせる */
  height: 100%; /* 親要素の幅にぴったり合わせる */
  border-radius: 0.5rem;
  object-fit: cover; /* 画像の比率を保ったまま領域を埋める */
  z-index: -2; /* 重なり順を下に設定 */
  opacity: 1;
  /* to blur internal edge of image (standard) */
  mask-image: 
    linear-gradient(to right, transparent, black 20%, black 80%, transparent),
    linear-gradient(to bottom, transparent, black 30%, black 90%, transparent);
  mask-composite: intersect;
  /* vendor prefix for Safari/Chrome/Edge */
  -webkit-mask-image: 
    linear-gradient(to right, transparent, black 20%, black 80%, transparent),
    linear-gradient(to bottom, transparent, black 30%, black 90%, transparent);
  -webkit-mask-composite: source-in;
}
main .sol-checkbox {
  display: none;
}
main .sol-checkbox:checked + .sol-box {
  background: var(--cl-azzurro);
}
main .sol-checkbox:checked + .sol-box .sol-text {
  opacity: 1;
}
/* products */
main .product {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}
main .product-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 12rem;
  height: 10rem;
  margin: 1.5rem 0;
  box-sizing: border-box;
  border-radius: 0.5rem;
  border: 1px solid var(--my-gray);
}
main .product-box:hover{
  border: 4px solid var(--main-hover);
}
main .product-box a {
  display: block;
  font-family: var(--font-ui);
  width: 100%;
  height: 100%;
  padding: 0.5rem 0;
  text-align: center;
  text-decoration: none;
  color: var(--cl-azzurro);
}
main .product-box a:hover {
  color: var(--main-hover);
  text-decoration: underline;
}
main .product-box-img img {
  position: relative; /* to activate z-index */
  z-index: -1;
}
main .product-box-text {
  font-size: 0.9rem;
  margin: 0.5rem 1.2rem;
}
/* access map */
main .map iframe {
  display: block;
  width: 100% !important; /* HTML側の width="600" を無視して幅100%にする */
  height: 25rem; /* 高さは固定とする */
  border: none;
}
/* page background img */
main .background-img {
  position: relative;
}
main .background-img-box {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 10rem;  
  z-index: -1;
}
main .background-img-box img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.6;
  /* to blur internal edge of image (standard) */
  mask-image: 
    linear-gradient(to right, transparent, black 80%, black 90%, transparent),
    linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  mask-composite: intersect;
  /* vendor prefix for Safari/Chrome/Edge */
  -webkit-mask-image: 
    linear-gradient(to right, transparent, black 80%, black 90%, transparent),
    linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  -webkit-mask-composite: source-in;
}
/* fullsize image with shadow */
main .fullsize-img-shadow {
  border: 1px solid var(--my-light-gray);
  box-shadow: 0 0.25rem 1rem 0 rgba(0, 0, 0, 0.35);
}
main .fullsize-img-shadow img {
  display: block;
  max-width: 100%; /* 親要素の幅を超えないようにする */
  height: auto; /* アスペクト比を維持する */
}
/* company table */
main table.company {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0.5rem;
}
main table.company th {
  width: 6rem;
  padding: 0.25rem 1rem;
  text-align: center;
  font-weight: bold;
  vertical-align: middle;
  border-radius: 0.5rem;
  background: linear-gradient(var(--my-skyblue), var(--my-light-skyblue));
  color: var(--my-dark-gray);
}
main table.company td {
  padding: 0.25rem 0 0.125rem 1rem;
  vertical-align: top;
}
/* contact form */
main form {
  font-size: 1rem; /* dummy to avoid empty rule */
}
main .form-item-box {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
main .form-item-box label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
main .form-item-box label span {
  font-size: 0.8rem;
  color: var(--my-red);
}
main .form-item-box label::before {
  content: "■";
  color: var(--cl-azzurro);
}
main .form-item-box input {
  display: block;
  font-size: 1rem;
  line-height: 1.5rem;
  width: 50%;
  box-sizing: border-box;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--my-light-gray);
  background: var(--my-white);
  opacity: 0.7;
}
main .form-item-box .zip-box {
  display: flex;
  flex-direction: row;
  align-items: center;
}
main .form-item-box .zip-box input {
  width: 5rem;
}
main .form-item-box select {
  display: block;
  font-size: 1rem;
  line-height: 1.5rem;
  width: 10rem;
  box-sizing: border-box;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--my-light-gray);
  background: var(--my-white);
  opacity: 0.7;
}
main .form-item-box textarea {
  display: block;
  font-size: 1rem;
  line-height: 1.5rem;
  width: 70%;
  box-sizing: border-box;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--my-light-gray);
  background: var(--my-white);
  opacity: 0.7;
}
main form button {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: bold;
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 2rem;
  background: linear-gradient(var(--cl-azzurro), var(--cl-skyblue));
  color: var(--my-white);
  cursor: pointer;
}
main form button:hover {
  color: var(--main-hover);
}
/* separator line */
main hr {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--my-dark-gray), transparent);
}




/* news */
main .news-list {
  margin-bottom: 2rem;
}
main .news-list ul li {
  display: flex;
  margin-top: 0;
  margin-bottom: 1.5rem;
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
}
main .news-list time {
  width: 6rem;
  padding: 0.25rem 1rem;
  text-align: center;
  font-weight: bold;
  margin-right: 1rem;
  color: var(--cl-azzurro);
  border-radius: 0.5rem;
  background: linear-gradient(var(--my-skyblue), var(--my-light-skyblue));
  color: var(--my-dark-gray);
}
main .news-list h2 {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.2rem;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0.25rem 0;
  border: none;
}



main .news-unit {
  margin-bottom: 2rem;
}
main .news-date-title {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-top: 1rem;
}
main .news-date {
  width: 6rem;
  padding: 0.25rem 1rem;
  text-align: center;

  font-weight: bold;
  margin-right: 1rem;
  color: var(--cl-azzurro);
  border-radius: 0.5rem;
  background: linear-gradient(var(--my-skyblue), var(--my-light-skyblue));
  color: var(--my-dark-gray);
}
main .news-date-title h2 {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.2rem;
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
  border: none;
}
main .news-content {
  margin: 0 2rem;
}
/* pagination */
main .pagination {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 2rem;
}
main .pagination a {
  display: block;
  font-weight: bold;
  width: 7rem;
  padding: 0.5rem;
  background: linear-gradient(var(--my-skyblue), var(--my-light-skyblue));
  border-radius: 0.5rem;
  color: var(--my-black);
  text-decoration: none;
  text-align: center;
}
main .pagination a:hover {
  background: linear-gradient(var(--cl-azzurro), var(--cl-skyblue));
  color: var(--nav-hover);
}

/*--- footer ---*/
/* separator line */
footer hr {
  border: none;
  height: 1px;
  background: var(--my-light-gray);
}
/* copyright */
footer .copyright {
  font-size: 0.8rem;
  line-height: 0.8rem;
  padding: 0.2rem 1rem 1rem 0;
  text-align: right;
}
/* eof */