@charset "utf-8";
/*==========================
common
==========================*/
:root {
    --primary-black: #333333;
    --primary-white: #FFFFFF;
    --primary-orange: #ED7600;
}
html {
    font-size: 62.5%;
}
body {
    font-family: "Zen Kaku Gothic Antique";
    color: #333333;
    font-weight: 400;
    font-style: normal;
    font-size: 1.6rem;
    background-color: #FFFFFF;
    padding-top: 60px;
    line-height: 1.5;
}
a {
    text-decoration: none;
    color: var(--primary-black);
}
img {
    max-width: 100%;
}
li {
    list-style: none;
}
.wrapper {
    max-width: 1440px;
    padding: 200px 100px 100px 100px;
    margin: 0 auto;
}
.section__title {
    color: var(--primary-orange);
    font-size: 5.2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 75px;
}
@media screen and (max-width:768px){
    .wrapper {
        padding: 150px 15px 100px 15px;
        margin: 0 auto;
    }
    .section__title {
        margin-bottom: 30px;
        text-align: center;
        font-size: 3.2rem;
        font-weight: 700;
    }
    body {
        font-size: 1.2rem;
    }
}
/* ==========================
header
===========================*/
#header {
    background-color: #FFFFFF;
    position: fixed;
    top: 0; 
    width: 100%;
    z-index: 1000;
}
.header__inner {
    max-width: 1440px;
    width: 100%;
    display: flex;
    justify-content: space-between; 
    margin: 0 auto;
    padding: 20px 7%;
    align-items: center;
    height: 90px; 
}
.logo {
    width: 122px;
    height: 60px;
}
.menu ul {
    display: flex;
    gap: 50px;
}
@media (max-width: 768px) {
    #header {
        height: 75px;
    }
    .logo {
        width: 71px;
        height: 35px;
    }
    /* メニューのスタイル */
    .menu {
        position: fixed;
        top: 0;
        right: -300px; /* 初期状態では画面の外に隠れている */
        width: 300px;
        height: 100%;
        background-color: rgba(95, 95, 95, 0.95);
        color: #333;
        transition: right 1s ease-in-out; 
        /* スライドインのアニメーション */
        padding: 20px;
        box-sizing: border-box;
        z-index: 10;
    }
    /* メニューが開いているとき */
    .menu.open {
        right: 0;
    }
    /* ボタンのスタイル */
    .hamburger {
        position: fixed;
        top: 20px;
        right: 10%;
        width: 30px;
        cursor: pointer;
        z-index: 20;
    }
    .hamburger span {
        display: block;
        height: 1.5px;
        width: 100%;
        background-color: #333;
        margin: 7.5px 0;
        transition: 0.8s;
        transform-origin: center;
    }
    /* closeボタンに変化する */
    .hamburger.active span:nth-child(1),
    .hamburger.active span:nth-child(2),
    .hamburger.active span:nth-child(3) {
        background-color: #fff; /* 白色に変更 */
    }
    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }
/* メニューリストのスタイル */
    .menu ul {
        flex-direction: column;
        list-style-type: none;
        padding: 0;
        margin: 50px 0 0 20px;
        gap: 30px;
    }
    .menu li {
        padding: 20px 0;
        font-size: 2.0rem;
    }
    .menu li a {
        color:var(--primary-white);
        text-decoration: none;
        display: block;
    }
}
/* ==========================
main-visual
===========================*/
.main-visual {
    padding: 0 7%;
}
.catchphrase {
    padding: 100px 0;
    font-size: 3.2rem;
    margin-left: 10%;
}
.main-visual_img_sp {
    display: none;
}
.main-visual_img_pc {
  display: block;
  margin: 0 auto;
  /* max-width: 1240px; */
}
.lead {
    padding: 75px 0 100px 0;
    text-align: center;
    font-weight: 400;
    line-height: 45px; /* 281.25% */
}
.main-visual {
  opacity: 0; /* 最初は透明 */
  transition: opacity 4s ease-in-out; /* 徐々に表示 */
}
.main-visual.visible {
  opacity: 1; /* 徐々に表示される */
}
@media screen and (max-width:768px) {
    .main-visual {
        padding: 0 ;
    }
    .main-visual_img_pc {
        display: none;
    }
    .main-visual_img_sp {
        display: block;
        margin: 0 auto;
    }
    .catchphrase {
        padding: 75px 0;
        font-size: 2.0rem;
        margin-left: 10%;
    }
    .lead {
        padding: 75px 10px 100px 10px;
        line-height: 30px;
    }
} 
/* ==========================
news
===========================*/
.news__list {
    margin-bottom: 100px;
}
.news__list li {
    padding: 10px 0;
    display: flex;
    align-items: center;
    border-bottom: solid 1px #999;
}
.news__list time {
    padding: 10px 0;
    color:var(--primary-orange);
    width: 10%;
    flex-shrink: 0;
}
.news__list p {
    flex: 1;
    margin: 0;
}
.news__link-kochira {
    display: inline-block;
    padding: 2px 8px;
    color: #0c87b4;
    white-space: nowrap;
}
.news__link-kochira:hover {
    font-weight: 1000;
    font-family: "Noto Sans JP", sans-serif;
}

.news__link-jasis {
    display: inline-block;
    border: 1px solid #333;
    border-radius: 4px;
    background-color: #f9f9f9;
    padding: 2px 8px;
    white-space: nowrap;
}
.news__link-jasis:hover {
    font-weight: 1000;
    font-family: "Noto Sans JP", sans-serif;
}
@media screen and (max-width:768px){
    .news__list time {
        /* padding: 10px 0; */
        border-bottom: none;
        width: 60px;
    }
    .news__text {
        line-height: 1.5;
    } 
}
/* ==========================
TECHNOLOGY
===========================*/
/* #technology { 
    opacity: 0;
    transform: translateY(100px); 
    transition: all 3s ease-out;
    background-image: 
    linear-gradient(to right, #ddd 1px, transparent 1px),
    linear-gradient(to bottom, #ddd 1px, transparent 1px);
    background-size: 40px 40px;
}
#technology.show {
    opacity: 1;
    transform: translateY(0);
}*/
#technology {
    background-image: 
    linear-gradient(to right, #ddd 1px, transparent 1px),
    linear-gradient(to bottom, #ddd 1px, transparent 1px);
    background-size: 40px 40px;
}

.technology__inner {
    display:  flex;
    justify-content: space-around;
    padding: 0 0 50px 0;
    align-items: center;
}
.technology__text ul {
    padding: 28px 0 0 0;
    line-height: 2;
    padding-left: 1em; /* 点と文字の間の余白 */
    margin-left: 0;    /* はみ出し防止 */
}
.technology__text li {
    list-style: disc; /* 黒丸（デフォルト） */
    list-style-position: outside; /* 位置：外側 */
}
.technology__img {
    width: 48%;
    max-width: 491px;
}
.technology__btn {
    text-align: center;
}
.technology__btn a {
    display: inline-block;
    color: var(--primary-orange);
    padding: 15px 50px;
    margin: 0 auto;
    background: #FFF;
    border: 1px solid var(--primary-orange);
}
.technology__btn a:hover {
    color: #fff;
    background: var(--primary-orange);
}
@media screen and (max-width:768px){
    .technology__inner {
        display:  flex;
        flex-direction: column-reverse;
        padding: 0 0 30px 0;
        gap: 30px;
    }
    .technology__img {
        width: 100%;
    }
    .technology__btn a {
        padding: 10px 25px;
    }
}
/* ==========================
PRODUCTS
===========================*/
#products {
    background-color: #eee;
}
.products__inner {
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.products__container {
    display: flex;
    justify-content: space-between;
    background-color:var(--primary-white);
}
.products__img {
  width: 48%;
}
.products__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    width: 48%;
}
.productname {
    font-size: 2.4rem;
    font-weight: 400;
    margin-bottom: 30px;
}
.products__text ul {
    margin-bottom: 30px;
    padding-left: 1em; /* 点と文字の間の余白 */
    margin-left: 0;    /* はみ出し防止 */
}
.products__text li {
    list-style: disc; /* 黒丸（デフォルト） */
    list-style-position: outside; /* 位置：外側 */
}
.products__discription {
    margin-bottom: 30px;
}
.products__btn {
    text-align: center;
}
.products__btn a {
    display: inline-block;
    color: var(--primary-orange);
    padding: 10px 25px;
    margin: 0 auto;
    background: #FFF;
    border: 1px solid var(--primary-orange);
}
.products__btn a:hover {
    color: #fff;
    background: var(--primary-orange);
}

/* 左から */
.slide-left {
  opacity: 0;
  transform: translateX(-300px); /* 左にずらしておく */
  transition: all 1s ease;
}
.slide-left.show {
  opacity: 1;
  transform: translateX(0);
}

/* 右から */
.slide-right {
  opacity: 0;
  transform: translateX(300px); 
  transition: all 1s ease;
}
.slide-right.show {
  opacity: 1;
  transform: translateX(0);
}

@media screen and (max-width:768px) {
    .products__container {
        flex-direction: column;
    }
    .products__img {
        max-width: 400px;
        margin: 25px auto 0 auto;
    }
    .products__text {
        width: 100%;
    }
    .productname {
        font-size: 2.0rem;
    }
}
/* ==========================
COMPANY
===========================*/
.company__inner {
    display: flex;
    justify-content: space-around;
    margin-bottom: 50px;
}
.company__inner dl {
    display: flex;
    flex-wrap: wrap;
    width: 67%;
}
.company__inner dt {
  width:  15%;
  padding-bottom: 20px;
  margin-bottom: 10px;
  border-bottom: solid 1px #999;
  display: flex;
  align-items: center;
}
.company__inner dd {
  width: 85%;
  padding: 0 0 20px 20px;
  margin-bottom: 10px;
  border-bottom: solid 1px #999;
}
.company__inner dd span {
    margin-right: 1rem;
}
.googlemap {
    display: inline-block;
    color: #333;
    padding: 1px 5px;
    margin: 0 auto;
    border-radius: 5px;
    border: 1px solid #333;
    background: #FFF;
}
.company__img img {
    width: 165px;
    height: 220px;
}
.company__btn {
    text-align: center;
}
.company__btn a {
    display: inline-flex;       
    align-items: center;    
    color: var(--primary-orange);
    padding: 10px 30px;
    background: #FFF;
    border: double 5px;
    gap: 10px;
    text-decoration: none;
}
.company__btn a:hover {
    color: #fff;
    background: var(--primary-orange);
}
.company__btn img {
    width: 37px;
    height: 48px;
}
@media screen and (max-width:768px) {
    .company__inner {
        flex-direction: column;
        align-items: center;
        padding: 0 15px;
    }
    .company__inner dl {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-bottom: 30px;
    }
    .company__inner dt {
        width:  100%;
        padding-bottom: 10px;
        margin-bottom: 0px;
        border-bottom: none;
        display: flex;
        align-items: center;
    }
    .company__inner dd {
        width: 100%;
        padding: 0 0 10px 0px;
        margin-bottom: 10px;
        border-bottom: solid 1px #999;
    }
    .company__btn a {
        padding: 5px 15px;
    }

}
/* ==========================
footer
===========================*/
#footer {
    text-align: center;
    background-color: #FFFFFF;
    padding: 150px 0;
}