@charset "UTF-8";
@font-face {
    font-family:'DM Serif Display';
    src: url(/public/fonts/DMSerifDisplay-Regular.ttf);
}
@font-face {
    font-family:'Noto Sans Japanese';
    src: url(/public/fonts/NotoSansJP-Medium.ttf);
}
@font-face {
    font-family:'Arial';
    src: url(/public/fonts/Arialn.ttf);
}
@font-face {
    font-family:'Oswald';
    src: url(/public/fonts/Oswald-Regular.ttf);
}


/*******************************************************************************************
共通処理
*******************************************************************************************/
html {
    font-size: 120%;/*フォントサイズの基本値*/
    scroll-snap-type:y proximity;/*ページ内リンク少し上に着地調整*/
    scroll-padding-top:10vh;/*ページ内リンク少し上に着地調整*/
    /*scroll-behavior:smooth;/*上に戻る挙動をスムーズ化　　問い合わせフォームの画面外のフォームエラーが表示されなくなる影響あり*/
    scroll-behavior:auto;/*上に戻る挙動をスムーズ化　　問い合わせフォームの画面外のフォームエラーが表示されなくなる影響あり*/
    transition: font-size 0.3s ease; /* なめらかにフォントサイズが切り替わる */
}
/*フォントサイズ「小」*/
/*html.font-small {
    font-size: 87.5%;
}*/
/*フォントサイズ「大」*/
/*html.font-large {
    font-size: 120%;
}*/



body {
    background-color:white;
    /*font-family:'Arial', 'DM Serif Display', serif;*/
    font-family:serif;
    font-size: 1.0rem;
    line-height: 1.7;
}
/*中身のコンテンツ幅指定の共通クラス*/
.wrapper {
    width:1400px;
    max-width:100%;
    margin: 0 auto;
    padding:0 3%;
    text-align: center;
    position:relative;
}
/*新着記事に「NEW」を付与*/
.text_icon{
    color:white;
    font-weight:bold;
    background-color:red;
    border-radius:30px;
    padding:3px 10px;
    margin-left:10px;
}
/*ＰＣ用の改行*/
br.br_pc{
    display:block;
}
/*スマホ用の改行*/
br.br_sm{
    display:none;
}
/*******************************************************************************************
変数定義
*******************************************************************************************/
body{
    /*テーマカラー*/
    /*--themecolor: rgb(20,196,105,1.0);*/
    --themecolor:rgb(0,169,159);
    /*テーマカラー サブ*/
    /*--themecolor_sub: #cceee0;*/
    --themecolor_sub: rgb(150, 210, 206);
    --themecolor_sub: rgb(204, 240, 238);
    /*テーマカラー 強調部*/
    /*--themecolor_emphasis:rgb(219,143,8);*/
    --themecolor_emphasis:#ffab16;
    /*フォントカラー*/
    --fontcolor:#222222; 
    /*フォントカラー　サブ*/
    --fontcolor_sub:white; 

    color:var(--fontcolor);
}
/*******************************************************************************************
header
*******************************************************************************************/
#header{
    /*display:block;*/ 
    display:flex;
    width:100%;
    max-width:100%;
    height:9vh;
    background-color:var(--themecolor);
    position:fixed;
    top:0;
    left:0;
    right:0;
    transition-duration:0.5s;
    z-index:20;
}
#header #header_menu_area{
    display:flex;
    justify-content:space-between;
    /*align-items:center;*/
    width:100%;
    height:auto;

    flex: 1; /* 必要に応じて調整。全体を埋める */
    align-items: stretch;
}
#header #header_menu_area #header_menu{
    display:flex;
    justify-content:space-between;
    /*align-items:center;*/
    align-items:stretch;
    width:100%;
    height:auto;
}
#header #header_menu_area #header_menu .logo_area{
    display:flex;
    height:auto;
    /*align-items:center;*/
}
#header #header_menu_area #header_menu .logo_area a.header_menu_title{
    display:flex;
    width:75px;
    height:auto;
}
#header #header_menu_area #header_menu .logo_area a.header_menu_title img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}
#header #header_menu_area #header_menu .logo_area .title{
    display:flex;
    width:100%;
    height:100%;
    align-items:center;
    color:white;
    font-size:max(2vw, 1.5rem);
    white-space:nowrap;
}

#header #header_menu_area #header_menu .right_area{
    display:flex;
    height:auto;
    align-items:center;
    margin-right:20px;
}
#header #header_menu_area #header_menu #nav{
    display:block;
    height:auto;
}
#header #header_menu_area #header_menu #nav ul#nav_menu{
    display:flex;
    height:auto;
}
#header #header_menu_area #header_menu #nav ul#nav_menu li.nav_menu_item{
    display:block;
    color:white;
    font-size:0.9rem;
    font-weight:bold;
    /*font-family:'DM Serif Display', serif;*/
    font-family:serif;
    letter-spacing:0.2rem;
    position:relative;
    padding:5px 1vw;
    border-radius:20px;
    transition-duration:0.5s;
}
#header #header_menu_area #header_menu #nav ul#nav_menu li.nav_menu_item:hover{
    color:var(--themecolor);
    background-color:white;
    text-shadow:none;
    transition: background-color 0.5s;
}
#header #header_menu_area #header_menu #nav ul#nav_menu li.nav_menu_item a{
    display:block;
    width:100%;
    height:100%;
    white-space:nowrap;
}
#header #header_menu_area #header_menu .tel_area{
    display:flex;
    width:auto;
    height: 100%;
    justify-content:center;
    flex-direction:column;
    background-color:var(--themecolor);
    border:1px solid var(--themecolor);
    align-items: center; /* 垂直中央寄せ */
    padding:0 1%;
}
#header #header_menu_area #header_menu .tel_area span.line1{
    display:block;
    
}
#header #header_menu_area #header_menu .tel_area span.line2{
    display:block;
    font-size:0.8rem;
}
#header #header_menu_area #header_menu .tel_area span.line1 span.text{
    color:white;
    font-size:1.2rem;
    margin-right:10px;
}
#header #header_menu_area #header_menu .tel_area span.line1 a.telno{
    color:white;
    font-size:1.9rem;
    /*font-family: 'Oswald';*/
    font-weight:bold;
    letter-spacing:0.2rem;
    white-space:nowrap;
}
/*
ハンバーガメニュー（共通）
*/
#header .hamburger_btn{
    display:none;
    width:fit-content;
    /*margin:0 2% 0 auto;*/
    z-index:100;
    position:absolute;
    top:100%;
    right:0;
}
/*ボタン外側*/
#header .hamburger_btn .header_menu_lines{
    position: relative;/*ボタン内側を基点とする*/
    background:white;
    border:1px solid var(--themecolor);
    cursor: pointer;
    width: 40px;
    height:40px;
    border-radius: 50%;
}
/*ボタン内側*/
#header .hamburger_btn .header_menu_lines span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 5px;
    height: 4px;
    border-radius: 5px;
    background: var(--themecolor);
    width: 75%;
}
#header .hamburger_btn .header_menu_lines span:nth-of-type(1) {
    /*top:10px; */
    top:calc(50% - 20%);
    transform:translateY(-50%);
}
#header .hamburger_btn .header_menu_lines span:nth-of-type(2) {
    /*top:18px;*/
    top:calc(50%);
    transform:translateY(-50%);
}
  
#header .hamburger_btn .header_menu_lines span:nth-of-type(3) {
    /*top:26px;*/
    top:calc(50% + 20%);
    transform:translateY(-50%);
}
#header .hamburger_btn .header_menu_lines.active span:nth-of-type(1) {
    top: 12px;
    left:10px;
    transform: translateY(6px) rotate(-45deg);
    width: 50%;
}
  
#header .hamburger_btn .header_menu_lines.active span:nth-of-type(2) {
    opacity: 0;
}
  
#header .hamburger_btn .header_menu_lines.active span:nth-of-type(3){
    top: 24px;
    left: 10px;
    transform: translateY(-6px) rotate(45deg);
    width: 50%;
}
  
#header .hamburger_btn .header_menu_lines.active span:nth-of-type(3)::after {
    /*content:"Close";MENU文言非表示*/
    transform: translateY(0) rotate(-45deg);
    top:5px;
    left:4px;
}

/*
スライドメニュー
*/
#header_slide_menu_area{
    display:none;/*PC非表示*/
    background-color:var(--themecolor);
    position: fixed;
    top: 0px;
    right: 0px;
    width: 70%;
    height:100%;
    transform: translateX(100%); /* ハンバーガーメニューOFF時、右側へスライドさせておく */
    z-index:100;
    transition: 0.4s;
    overflow-y:scroll;/*メニュー縦スクロール許可*/
}
#header_slide_menu_area.active{
    transform: translateX(0);
    display:block;
}
#header_slide_menu_area .shop_name .link{
    display:flex;
    align-items:center;
    background-color:white;
    margin-top:20px;
}
#header_slide_menu_area .shop_name .link .logo_area{
    display:block;
    width:20%;
    height:auto;
    padding-left:3%;
}
#header_slide_menu_area .shop_name .link .logo_area img{
    display:block;
}
#header_slide_menu_area .shop_name .link .name_area{
    display:block;
    width:80%;
    height:auto;
    font-size:1.2rem;
    font-weight:bold;
    color:var(--themecolor);
    margin-left:10px;
}
#header_slide_menu_area .header_slide_menu{
    color:white;
    padding:30px 5% 0 5%;
}
#header_slide_menu_area .header_slide_menu li{
    white-space:nowrap;
    padding-bottom:30px;
    font-family:'DM Serif Display', serif;
}
#header_slide_menu_area .header_slide_menu li:last-child{
    padding-bottom:0;
}
#header_slide_menu_area .header_slide_menu li .header_slide_menu_btn{
    letter-spacing:0.3rem;
    position:relative;
    padding-left:10px;
}
#header_slide_menu_area .header_slide_menu li .header_slide_menu_btn:before{
    content:"";
    display:block;
    width:5px;
    height:5px;
    border-radius:50%;
    background-color:white;
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
}
/*お問い合わせ*/
#header_slide_menu_area .header_slide_menu li .header_slide_menu_btn.contact{
    display:block;
    width:100%;
    height:auto;
    font-weight:bold;
    border:3px solid white;
    border-radius:5px;
    text-align:center;
    padding-left:0px;
    padding:1%;
}
#header_slide_menu_area .header_slide_menu li .header_slide_menu_btn.contact:before{
    content:none;
}
/*tel*/
#header_slide_menu_area .tel_area{
    display:block;
    width:100%;
    height:auto;
    color:white;
    font-size:1.5rem;
    font-weight:bold;
    font-family: 'Oswald';
    letter-spacing:0.3rem;
    text-align:center;
}
/*
スライドメニューのハンバーガーメニュー
*/
#header_slide_menu_area .hamburger_btn{
    position:absolute;
    top:10vh;
    right:0;
}
/*******************************************************************************************
mask_area
*******************************************************************************************/
#mask_area{
    display:none;
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    background-color:rgb(51,51,51,0.5);
    z-index:99;
}
#mask_area.active{
    display:block;
}
/*******************************************************************************************
mainvisual_slide（スライドショー用）
*******************************************************************************************/
#mainvisual_slide{
    position:relative;
    width:100%;
    margin-top:9vh;
}
#mainvisual{
    position:relative;
    overflow:hidden;
    width:68%;
    height:91vh;
    max-height:91vh;
    margin-right:2.5vw;
    margin-left:auto;
}
/*メインビジュアル画像DIV*/
#mainvisual div{
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100vh;
    max-height:100vh;
    background-position: 50% 0%;/*画像のポジション調整 横% 縦%*/
    background-size: cover; /*画像のポジション調整*/
    background-repeat: no-repeat;
    z-index: 10;
    opacity: 0;
}
#mainvisual div:first-of-type{
    background-position: 50% 50%;/*画像のポジション調整 横% 縦%*/
}
#mainvisual div:nth-of-type(2){
    background-position: 50% 50%;/*画像のポジション調整 横% 縦%*/
}
#mainvisual div:nth-of-type(3){
    background-position: 50% 100%;/*画像のポジション調整 横% 縦%*/
}
/*
mainvisual スライドショー アニメーション処理
*/
.anime_mainvisual div{
    animation-name: fade;
    animation-duration: 36s;
    animation-iteration-count: infinite;
}
@keyframes fade {
    0%{
        opacity: 0;
    }
    20%{
        opacity: 1;
    }
    80%{
        opacity: 0;
        transform: scale(1.2);
    }
    100%{
        opacity: 0;
        z-index: 0;
    }
}
/* 1枚目のスライド */
.anime_mainvisual div:first-of-type{
    background-image: url(/public/img/mainvisual1.jpg);
}
/* 2枚目のスライド */
.anime_mainvisual div:nth-of-type(2){
    background-image: url(/public/img/mainvisual2.jpg);
    animation-delay: 12s;/*2枚目開始秒数*/
}
/* 3枚目のスライド */
.anime_mainvisual div:last-of-type{
    background-image: url(/public/img/mainvisual3.jpg);
    animation-delay: 24s;/*3枚目開始秒数*/
}
/*******************************************************************************************
mainvisual_video（動画用）
*******************************************************************************************/
.mainvisual_video{
    width:100%;
    height:100vh;
    overflow: hidden;
    /*position:absolute;*/
    position:relative;
    top:0;
    left:0;
    right:0;
}
.mainvisual_video::after{
    content: '';
    width: 100%;
    height: 100%;
    background-color:rgb(255, 255, 255,0.3);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}
.mainvisual_video .mainvisual_video_content{
    width:100%;
    height:100vh;
    position:relative;
    overflow: hidden;
}
.mainvisual_video .mainvisual_video_content video{
    position: absolute;
    top: 50%;/*動画の左上部分を中央に移動*/
    left: 50%;/*動画の左上部分を中央に移動*/
    transform: translateX(-50%) translateY(-50%);/*動画の左上部分が中央のため、縦横それぞれ50%ずつ上、左に移動*/
    min-width: 100%;
    min-height: 100%;
}
/*******************************************************************************************
slogan
*******************************************************************************************/
#slogan_area{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    right:0;
}
#slogan{
    width:100%;
    height:100%;
}
#slogan_area .slogan_line1{
    position:absolute;
    top:50%;
    left: calc(4% + 30px);
    font-size:2rem;
    font-weight:normal;
    letter-spacing:0.2rem;
    color:var(--fontcolor);
    background-color:rgb(246,244,239,0.6);
    text-shadow:1px 2px 3px white;
    filter: drop-shadow(1px 1px 20px white);
    z-index:11;
}
#slogan_area .slogan_line1 span.name{
    font-size:2.5rem;
    color:var(--themecolor);
    font-weight:bold;
}
#slogan_area .slogan_line1 span.text{
    display:inline-block;
}
#slogan_area .slogan_line2{
    display:inline-block;
    position:absolute;
    top:85%;
    left: calc(4% + 30px);
    font-size:1rem;
    font-family:'DM Serif Display', serif;
    font-weight:nomal;
    color:#848484;
    background-color:rgb(246,244,239,0.6);
    text-shadow:1px 2px 3px white;
    text-transform:uppercase;
    letter-spacing:0.2rem;
    filter: drop-shadow(1px 1px 20px white);
    z-index:11;
    padding-right:50px;
    position:relative;
}
#slogan_area .slogan_line2::after{
    content:"";
    width:70px;
    height:8px;
    background-color:var(--themecolor_emphasis);
    position:absolute;
    bottom:-15px;
    left:0px;
}
/*******************************************************************************************
アニメーション
*******************************************************************************************/
/*アニメーション（上下に動く）*/
.anime_updown{
    color:var(--themecolor);
    animation-name:UpDown;/*名称*/
    animation-duration: 1.5s;/*1回分の長さ*/
    animation-iteration-count: infinite;/*繰り返し回数*/
    animation-timing-function: ease-in-out;/*進行具合*/
    animation-direction: alternate;/*再生の向き*/
    }
    /* アニメーションの設定 */
    @keyframes UpDown{
    /* 開始地点 */
    0%{
    /* Y軸0px */
    transform: translateY(0);
    }
    /* 終了地点 */
    100%{
    /* Y軸50px */
    transform: translateY(15px);
    }
}
/*******************************************************************************************
reserved_btn_area
*******************************************************************************************/
#reserved_btn_area{
    position:absolute;
    bottom:0px;
    right:1.5rem;
    transform: translateY(50%);
    z-index:11;
}
#reserved_btn_area .reserved_btn{
    display:flex;
    justify-content:space-between;
    width:400px;
    color:white;
    background-color:var(--themecolor);
    padding:20px 30px;

}
#reserved_btn_area .reserved_btn .text_area{
    display:inline-block;

}
#reserved_btn_area .reserved_btn .text_area .text1{
    display:block;
    font-size:1.2rem;
    font-weight:bold;
    letter-spacing:0.1rem;
}
#reserved_btn_area .reserved_btn .text_area .text2{
    display:block;
    font-family:'DM Serif Display', serif;
    font-weight:400;
    letter-spacing:0.1rem;
}
#reserved_btn_area .reserved_btn .arrow_area{
    display:inline-block;
    width: 100px;
    padding:10px 30px 10px 20px;
    text-align:center;
    color:#FFF;
    margin:5px;
    cursor:pointer;
    position: relative;
    text-decoration: none;
    overflow:hidden;
}
#reserved_btn_area .reserved_btn .arrow_area::after{
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 5px);
    right: 20px;
    width: 100px;
    height: 5px;
    border: none;
    border-right: 2px solid #FFF;
    border-bottom: 1px solid #FFF;
    transform: skew(45deg);
    transition: 0.3s;
}
#reserved_btn_area .reserved_btn .arrow_area:hover::after{
    right: 10px;
    width: 120px;
}
/*******************************************************************************************
h1　（非表示）
*******************************************************************************************/
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/*******************************************************************************************
concept_area
*******************************************************************************************/
#concept{
    padding-top:100px;
    padding-bottom:100px;

}
#concept #concept_area{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
#concept #concept_area .text_area{
    width:50%;
    text-align:left;
    padding:0 30px;
}
#concept #concept_area .text_area h2{
    color:var(--fontcolor);
    font-size:1.3rem;
    font-weight:bold;
    letter-spacing:0.2rem;
    margin-bottom:50px;
    position:relative;
}
#concept #concept_area .text_area h2:after{
    content:"";
    width:70px;
    height:3px;
    background-color:var(--themecolor);
    position:absolute;
    bottom:-20px;
    left:0;
}
#concept #concept_area .text_area .message p{
    color:var(--fontcolor);
    font-size:1.0rem;
    line-height:3rem;
}
#concept #concept_area .text_area .message p span{
    display:inline-block;
}
#concept #concept_area .text_area .message p strong{
    color:var(--fontcolor);
    font-size:1.2rem;
    font-weight:bold;
}
#concept #concept_area .img_area{
    width:50%;
}
#concept #concept_area .img_area .image{
    display:block;
    width:100%;
    height:400px;
    position:relative;
}
#concept #concept_area .img_area .image::after{
    content:"";
    display:block;
    width:80%;
    height:100%;
    background-color:var(--themecolor);
    position:absolute;
    bottom:-25px;
    right:0;
    margin-right:50px;
    z-index:1;
}
#concept #concept_area .img_area .image img{
    display:flex;
    width:80%;
    height:100%;
    object-fit:cover;
    object-position:50% 40%;
    position:relative;
    margin-left:50px;
    z-index:2;
}
#concept #concept_area .under_area{
    display:flex;
    width:100%;
    height:auto;
    margin-top:30px;
    flex-direction:column;
}
#concept #concept_area .under_area .name{
    display:block;
    margin-bottom:10px;
}
#concept #concept_area .under_area .qualification span.text{
    display:block;
    margin-bottom:10px;
}
#concept #concept_area .under_area .qualification span.inline{
    display:inline-block;
}
/*******************************************************************************************
product
*******************************************************************************************/
#product{
    padding-top:100px;
    padding-bottom:100px;
    position:relative;
}
#product:before{
    content:"";
    display:block;
    width:85%;
    height:2px;
    background-color:var(--themecolor);
    position:absolute;
    top:0;
    left:50%;
    translate:-50% 0;
}
#product .inner h2{
    display:inline-block;
    color: var(--fontcolor);
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
    margin-bottom: 50px;
    position: relative;
}
#product .inner h2:after{
    content:"";
    width:70px;
    height:3px;
    background-color:var(--themecolor);
    position:absolute;
    bottom:-20px;
    left:50%;
    transform:translateX(-50%);
}
#product .inner .content{
    display:block;
    width:100%;
    height:auto;
    padding:0 10%;
}
#product .inner .content .item{
    margin-bottom:100px;
}
#product .inner .content .item .item_head{
    display:flex;
    width:calc(100% - 100px);
    height:auto;
    justify-content:space-between;
    border-top:3px solid var(--themecolor);
    border-bottom:3px solid var(--themecolor);
    position:relative;
    margin-left:100px;
    margin-bottom:30px;
}
#product .inner .content .item .item_head.lumity:before{
    content:"";
    display:block;
    width:100px;
    height:100px;
    background-image:url(/public/img/lumity_logo.svg);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
    position:absolute;
    top:50%;
    left:0;
    translate:-100% -50%;
}
#product .inner .content .item .item_head.widex:before{
    content:"";
    display:block;
    width:100px;
    height:100px;
    background-image:url(/public/img/widex_logo.svg);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
    position:absolute;
    top:50%;
    left:0;
    translate:-100% -50%;
}
#product .inner .content .item .item_head h3{
    color:var(--themecolor);
    font-size: 1.3rem;
    font-weight: bold;
    text-align:left;
    padding:1%;
}
#product .inner .content .item .item_head h3 span{
    display:block;
    width:100%;
    height:auto;
}
#product .inner .content .item .item_head .severity{
    display:flex;
    height:auto;
    justify-content:center;
    align-items:center;
}
#product .inner .content .item .item_head .severity .tag{
    display:flex;
    width:40px;
    height:40px;
    border-radius:10px;
    color:white;
    font-size:1.3rem;
    justify-content:center;
    align-items:center;
    margin-left:5px;
}
#product .inner .content .item .item_head .severity .tag:first-child{
    margin-left:0;
}
#product .inner .content .item .item_head .severity .tag.blue{
    background-color:rgb(140, 210, 215);
}
#product .inner .content .item .item_head .severity .tag.purple{
    background-color:rgb(160, 140, 200);
}
#product .inner .content .item .item_head .severity .tag.yellow{
    background-color:rgb(235, 203, 110);
}
#product .inner .content .item .item_head .severity .tag.red{
    background-color:rgb(232, 130, 130);
}
#product .inner .content .item .item_head .severity .empty{
    display:flex;
    width:40px;
    height:40px;
    border-radius:10px;
    margin-left:5px;
}
#product .inner .content .item .item_head .type{
    display:flex;
    align-items:center;
    margin-left:30px;
}
#product .inner .content .item .item_head .type .tag_charging{
    display:flex;
    width:70px;
    height:70px;
    color:white;
    font-size:1.0rem;
    background-color:rgb(160, 200, 120);
    border-radius:10px;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:1%;
}
#product .inner .content .item .item_head .type .tag_charging img{
    display:block;
    width:80%;
    height:auto;
}
#product .inner .content .item .item_head .type .tag_battery{
    display:flex;
    width:70px;
    height:70px;
    color:white;
    font-size:1.0rem;
    background-color:rgb(120, 120, 120);
    border-radius:10px;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:1%;
    margin-left:5px;
}
#product .inner .content .item .item_head .type .tag_battery img{
    display:block;
    width:80%;
    height:auto;
}
#product .inner .content .item .item_head .type .empty{
    display:flex;
    width:70px;
    height:70px;
    padding:1%;
    margin-left:5px;
}
#product .inner .content .item .item_head.widex{
    border-top:3px solid #605e5d;
    border-bottom:3px solid #605e5d;
}
#product .inner .content .item .item_head.widex h3{
    color:#605e5d;
}
#product .inner .content .item .item_body{
    display:flex;
    width:100%;
    height:auto;
    justify-content:space-between;
    padding-left:100px;
    margin-bottom:30px;
}
#product .inner .content .item .item_body .img_area{
    display:flex;
    width:calc(100% / 3);
    height:auto;
    flex:1;
    padding-left:10px;
}
#product .inner .content .item .item_body .img_area:first-child{
    padding-left:0;
}
#product .inner .content .item .item_body .img_area img{
    display:flex;
    width:100%;
    height:100%;
    object-fit:cover;
}
#product .inner .content .item .item_text{
    display:block;
    width:100%;
    height:auto;
    font-size:1.2rem;
    font-weight:bold;
    text-align:left;
    padding-left:100px;
    margin-bottom:30px;
}
#product .inner .content .item .item_text.lumity p{
    color:var(--themecolor);
}
#product .inner .content .item .item_text.widex p{
    color:#605e5d;
}
#product .inner .content .item .item_text.widex span{
    display:inline-block;
}
#product .inner .content .item .item_source{
    font-size:0.8rem;
    text-align:right;
}
/*******************************************************************************************
hearing_situations
*******************************************************************************************/
#hearing_situations{
    display:block;
    width:100%;
    height:auto;
    background-color:var(--themecolor_sub);
    padding:5% 0;
}
#hearing_situations .inner h2{
    display:inline-block;
    color: var(--fontcolor);
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
    margin-bottom: 70px;
    position: relative;
}
#hearing_situations .inner h2:after{
    content:"";
    width:70px;
    height:3px;
    background-color:var(--themecolor);
    position:absolute;
    bottom:-20px;
    left:50%;
    transform:translateX(-50%);
}
#hearing_situations .inner h2 span{
    display:inline-block;
}
#hearing_situations .inner .content_box{
    display:flex;
    width:100%;
    height:auto;
    justify-content:center;
    flex-wrap:wrap;
    align-items:stretch;
}
#hearing_situations .inner .content_box .item{
    display:flex;
    width:48%;
    height: auto;
    margin-bottom:30px;
    flex-direction:column;
}
#hearing_situations .inner .content_box .item:nth-of-type(1){
    margin-right:30px;
}
#hearing_situations .inner .content_box .item:nth-of-type(3){
    margin-right:30px;
}
#hearing_situations .inner .content_box .item h3{
    display:block;
    width:100%;
    height:auto;
    font-size:1.5rem;
    background-color: #f4f1ed;
    position:relative;
}
#hearing_situations .inner .content_box .item .explanation{
    display:flex;
    width:100%;
    height:auto;
    flex: 1;
}
#hearing_situations .inner .content_box .item .explanation .img_area{
    display:block;
    width:50%;
    height:auto;
}
#hearing_situations .inner .content_box .item .explanation .text_area{
    display:block;
    width:50%;
    height:auto;
    background-color:white;
    text-align:left;
    padding:2%;
}
#hearing_situations .inner .content_box .item .explanation .text_area h4{
    font-size:1.3rem;
    font-weight:bold;
    margin-bottom:10px;
}
#hearing_situations .inner .content_box .item .explanation .text_area h4 span.text{
    display:inline-block;
}
#hearing_situations .inner .content_box .item .explanation .img_area img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
/*******************************************************************************************
purchase
*******************************************************************************************/
#purchase{
    padding-top:100px;
    padding-bottom:100px;
    background-color:#f4f1ed;
    position:relative;
}
/*
#purchase::before{
    content:"";
    display:block;
    width:15vw;
    height:15vw;
    background-image:url(/public/img/triangle_left.svg);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
    position:absolute;
    bottom:0;
    left:0;
    z-index:2;
    transform:translateY(100%);
}*/
#purchase .inner h2{
    display:inline-block;
    color: var(--fontcolor);
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
    margin-bottom: 50px;
    position: relative;
}
#purchase .inner h2:after{
    content:"";
    width:70px;
    height:3px;
    background-color:var(--themecolor);
    position:absolute;
    bottom:-20px;
    left:50%;
    transform:translateX(-50%);
}
#purchase .inner .flow{
    margin-top:50px;
}
#purchase .inner .flow .item{
    display:flex;
    width:100%;
    height:auto;
    justify-content:center;
    margin-bottom:50px;
}
#purchase .inner .flow .item .img_area{
    display:flex;
    height:auto;
    position:relative;
}
#purchase .inner .flow .item .img_area:after{
    content:"";
    width:3px;
    height:100%;
    background-color:var(--themecolor);
    position:absolute;
    bottom:0;
    left:50%;
    transform:translate(-50%, 100%);
    z-index:1;
}
#purchase .inner .flow .item:nth-of-type(6) .img_area:after{
    content:none;
}
#purchase .inner .flow .item .img_area .img_inner{
    display:block;
    width:200px;
    height:200px;
    border-radius:50%;
    border:5px solid var(--themecolor);
    overflow:hidden;
    position:relative;
    z-index:2;
}
#purchase .inner .flow .item .img_area .img_inner img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
#purchase .inner .flow .item .text_area{
    display:block;
    width:70%;
    height:auto;
    text-align:left;
    margin-left:5%;
}
#purchase .inner .flow .item .text_area span.title{
    display:block;
    width:100%;
    height:auto;
    color:var(--themecolor);
    font-size:1.2rem;
    font-weight:bold;
    border-bottom:3px solid var(--themecolor);
    margin-bottom:10px;
}
#purchase .inner .flow .item .text_area span.explanation{
    display:block;
    width:100%;
    height:auto;
}
#purchase .inner .flow .item .text_area span.supplement{
    display:block;
    width:100%;
    height:auto;
    font-size:0.8rem;
    margin-top:10px;
}
/*******************************************************************************************
aftercare.php
*******************************************************************************************/
#aftercare{
    padding-top:100px;
    padding-bottom:100px;
    position:relative;
}
#aftercare .inner{
    padding:0 5%;
}
#aftercare .inner h2{
    display:inline-block;
    color: var(--fontcolor);
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
    margin-bottom: 50px;
    position: relative;
}
#aftercare .inner h2:after{
    content:"";
    width:70px;
    height:3px;
    background-color:var(--themecolor);
    position:absolute;
    bottom:-20px;
    left:50%;
    transform:translateX(-50%);
}
#aftercare .inner .list{
    margin-top:50px;
}
#aftercare .inner .list .item{
    display:flex;
    width:100%;
    height:auto;
    margin-bottom:50px;
}
#aftercare .inner .list .item .img_area{
    display:block;
    width:30%;
    height:300px;
}
#aftercare .inner .list .item .img_area img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
#aftercare .inner .list .item .text_area{
    display:block;
    width:70%;
    height:auto;
    text-align:left;
    padding:0;
}
#aftercare .inner .list .item .text_area h3{
    display:block;
    width:100%;
    height:auto;
    font-size:1.2rem;
    font-weight:bold;
    background-color:#f4f1ed;;
    padding:1%;
    margin-bottom:20px;
}
#aftercare .inner .list .item .text_area .explanation{
    display:block;
    width:100%;
    height:auto;
    font-size:1rem;
    padding:1%;
}
#aftercare .inner .list .item .text_area .explanation .break{
    display:inline-block;
}
/*******************************************************************************************
question.php
*******************************************************************************************/
#question{
    padding-top:100px;
    padding-bottom:100px;
    background-color:rgb(244, 241, 237);
    position:relative;
}
#question::after {
    content: "";
    display: block;
    width: 100%;
    height: 50px;
    position: absolute;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background-color: rgb(244, 241, 237);
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: translateY(100%);
}

#question .inner{
    padding:0 5%;
}
#question .inner h2{
    display:inline-block;
    color: var(--fontcolor);
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
    margin-bottom: 50px;
    position: relative;
}
#question .inner h2:after{
    content:"";
    width:70px;
    height:3px;
    background-color:var(--themecolor);
    position:absolute;
    bottom:-20px;
    left:50%;
    transform:translateX(-50%);
}
#question .inner .list h3{
    display:block;
    width:100%;
    height:auto;
    font-size:1.2rem;
    text-align:left;
    border-bottom:2px solid var(--themecolor);
    margin-top:30px;
    margin-bottom:10px;
    padding-left:20px;
    position:relative;
}

#question .inner .list h3::before{
    content:"";
    display:block;
    width:10px;
    height:10px;
    background-color:var(--themecolor);
    border-radius:50%;
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
    
}
#question .inner .list .item .title_area{
    display:block;
    width:100%;
    height:auto;
    font-size:1.2rem;
    color:var(--fontcolor);
    background-color:var(--themecolor_sub);
    /*border:1px solid var(--themecolor);*/
    text-align:left;
    padding:1% 3%;
    position:relative;
}

#question .inner .list .item .answer_area{
    display:block;
    width:100%;
    height:auto;
    font-size:1.0rem;
    color:var(--fontcolor);
    background-color:white;
    text-align:left;
    padding:1% 3%;
}
/*******************************************************************************************
access
*******************************************************************************************/
#access{
    padding-top:100px;
    padding-bottom:100px;
}
#access .inner{
    padding:0 5%;
}
#access .inner h2{
    display:inline-block;
    color: var(--fontcolor);
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
    margin-bottom: 50px;
    position: relative;
}
#access .inner h2:after{
    content:"";
    width:70px;
    height:3px;
    background-color:var(--themecolor);
    position:absolute;
    bottom:-20px;
    left:50%;
    transform:translateX(-50%);
}
#access .map_area{
    display:block;
    width:100%;
    height:auto;
    margin-bottom:50px;
}
#access .map_area iframe{
    display:block;
}
#access .inner #information{
    display:flex;
    width:100%;
    height:auto;
    border:3px solid var(--themecolor);
}
#access .inner #information .img_area{
    display:block;
    width:50%;
    height:auto;;
    overflow: hidden;
    position:relative;
}
#access .inner #information .img_area img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
}
#access .inner #information .text_area{
    display:block;
    width:50%;
    height:auto;
}
#access .inner #information .text_area .head{
    display:flex;
    align-items:center;
    width:100%;
    height:auto;
    background-color:var(--themecolor_sub);
    text-align:left;
}
#access .inner #information .text_area .head span.logo{
    display:inline-block;
    width:60px;
    height:60px;
    background-color:var(--themecolor);
}
#access .inner #information .text_area .head span.logo img{
    display:block;
    width:100%;
    height:100%;
}
#access .inner #information .text_area .head span.shopname{
    display:inline-block;
    width:fit-content;
    height:auto;
    font-size:1.5rem;
    margin-left:20px;
}
#access .inner #information .text_area .body{
    display:block;
    width:100%;
    height:calc(100% - 60px);
}
#access .inner #information .text_area .body .body_inner{
    display:flex;
    width:100%;
    height:100%;
    flex-direction:column;
    justify-content:center;
    padding:5%;
}
#access .inner #information .text_area .body .body_inner dl{
    display: grid;
    grid-template-columns: max-content 1fr;
    row-gap: 10px;
    column-gap: 1em;
    margin-bottom:10px;
}
#access .inner #information .text_area .body .body_inner dl dt{
    display: flex;
    font-weight: bold;
    white-space: nowrap; /* 改行させない */
    color:white;
    background-color:var(--themecolor);
    border-radius:10px;
    justify-content:center;
    align-items:center;
    padding:1px 10px;
}
#access .inner #information .text_area .body .body_inner dl dd{
    margin: 0;
    text-align:left;
}
#access .inner #information .text_area .body .body_inner dl dd span{
    display:inline-block;
}
#access .inner #information .text_area .body .body_inner .way{
    display:block;
    width:100%;
    height:auto;
    text-align:left;
}
#access .inner #information .text_area .body .body_inner .supplement{
    display:block;
    width:100%;
    height:auto;
    text-align:left;
}
#access .inner #information .text_area .body .body_inner .comment{
    display:flex;
    width:100%;
    height:auto;
    border-top:2px solid var(--themecolor_sub);
    margin-top:10px;
    padding:1%;
}
#access .inner #information .text_area .body .body_inner .comment .text{
    text-align:left;
}
#access .inner #information .text_area .body .body_inner .comment .text span.span_br{
    display:inline-block;
}
#access .inner #tel_btn{
    display:block;
    width:100%;
    height:auto;
    font-weight:bold;
    text-align:left;
    padding:0 2%;
    margin-top:50px;
    margin-bottom:5px;
}
#access .inner #tel_btn a.number{
    display:block;
    width:fit-content;
    height:auto;
    font-size:1.5rem;
    text-align:center;
    color:white;
    background-color:var(--themecolor_emphasis);
    border-radius:30px;
    box-shadow: 0 0 8px gray;
    margin:0 auto;
    padding:1% 5%;
    position:relative;
    transition:0.3s;
}
#access .inner #tel_btn a.number:hover{
    color:white;
    background-color:var(--themecolor);
}
#access .inner #tel_btn a.number:after{
    content:"";
    display:block;
    width:15px;
    height:15px;
    background-image:url(/public/img/angle-right-solid-white.svg);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
    position:absolute;
    top:50%;
    right:0;
    transform:translate(-100%, -50%);
}
#access .inner .tel_text{
    display:block;
    width:100%;
    height:auto;
    text-align:center;
    font-size:1.8rem;
    font-weight:bold;
    color:var(--themecolor_emphasis);
    letter-spacing:0.3rem;
    margin-bottom:20px;
}
/*******************************************************************************************
contact.php
*******************************************************************************************/
#contact_container{
    padding-top:100px;
    padding-bottom:100px;
}
#contact_container #contact_main{
    text-align:center;
    margin:100px 10% 0 10%;
}
#contact_container #contact_main .tel_area{
    display:block;
    width:100%;
    height:auto;
    border:3px solid var(--themecolor);
    background-color:var(--themecolor_sub);
    border-radius:10px;
    margin-bottom:100px;
}
#contact_container #contact_main .tel_area h2{
    display:block;
    width:100%;
    height:auto;
    color: white;
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
    background-color:var(--themecolor);
    padding:1%;
    margin: 0 auto;
    position: relative;
}
#contact_container #contact_main .tel_area a.tell{
    display:block;
    width:fit-content;
    height:auto;
    margin:30px auto 10px auto;
    border-bottom:3px solid var(--themecolor);
}
#contact_container #contact_main .tel_area a.tell span.title{
    font-size:1rem;
    font-weight:bold;
}
#contact_container #contact_main .tel_area a.tell span.number{
    font-size:1.5rem;
    font-weight:bold;
    margin-left:10px;
    letter-spacing:0.5rem;
}
#contact_container #contact_main .tel_area p.opening{
    display:block;
    width:100%;
    height:auto;
    font-size:1rem;
}
#contact_container #contact_main .tel_area p.holiday{
    display:block;
    width:100%;
    height:auto;
    font-size:1rem;
    margin-bottom:30px;
}
#contact_container #contact_main .mail_area{
    display:block;
    width:100%;
    height:auto;
    border:3px solid var(--themecolor);
    background-color:var(--themecolor_sub);
    border-radius:10px;
    margin-bottom:100px;
}
#contact_container #contact_main .mail_area h2{
    display:block;
    width:100%;
    height:auto;
    color: white;
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
    background-color:var(--themecolor);
    padding:1%;
    margin: 0 auto;
    position: relative;
}
#contact_container #contact_main .mail_area p.explanation{
    font-size:1rem;
    color:var(--fontcolor);
    margin-top:30px;
}
#contact_container #contact_main .mail_area form{
    margin:50px 20% 0 20%;
}
#contact_container #contact_main .mail_area form .input_item{
    display:flex;
    text-align:left;
    margin-bottom:20px;
    border-radius:5px;
    overflow:hidden;
}
#contact_container #contact_main .mail_area form .input_item label{
    display:inline-block;
    width:30%;
    font-size:0.9rem;
    font-weight:bold;
    color:var(--fontcolor);
    white-space:nowrap;
    padding:3px 10px;
    margin-bottom:5px;
    /*background-color:var(--themeheadcolor);*/
    vertical-align:top;
}
#contact_container #contact_main .mail_area form .input_item label span.required{
    display:inline-block;
    width:auto;
    color:#d7003a;
    background-color:rgb(238,187,185);
    border-radius:5px;
    padding:0 5px;
    margin-left:10px;
}
#contact_container #contact_main .mail_area form .input_item .sex_list{
    display:inline-block;
    width:70%;
    background-color:white;
    border:1px solid var(--themecolor);
    border-radius:5px;
}
#contact_container #contact_main .mail_area form .input_item .sex_list .sex_item{
    display:flex;
    align-items:center;
    margin:10px;
}
#contact_container #contact_main .mail_area form .input_item .sex_list .sex_item p.text{
    color:var(--fontcolor);
    font-weight:bold;
    white-space:nowrap;
    margin-left:10px;
}
#contact_container #contact_main .mail_area form .input_item input{
    display:inline-block;
    width:70%;
    background-color:white;
    border:1px solid var(--themecolor);
    border-radius:5px;
    padding:3px 10px;
}
#contact_container #contact_main .mail_area form .input_item input::placeholder{
    color:rgb(0,0,0,0.5);
}
#contact_container #contact_main .mail_area form .input_item .sex_list .sex_item input{
    display:inline-block;
    width:auto;
    background-color:white;
    border:1px solid var(--themecolor);
    padding:3px 10px;
    appearance: revert;/*ラジオボタンのチェックボタン表示に必要*/
    vertical-align:middle;
    margin-left:10%;
}
#contact_container #contact_main .mail_area form .input_item select{
    display:inline-block;
    width:70%;
    background-color:white;
    border:1px solid var(--themecolor);
    border-radius:5px;
    padding:3px 10px;
}
#contact_container #contact_main .mail_area form .input_item select option{
    color:var(--fontcolor);
    font-weight:bold;
}
#contact_container #contact_main .mail_area form .input_item textarea{
    display:inline-block;
    width:70%;
    background-color:white;
    border:1px solid var(--themecolor);
    border-radius:5px;
    padding:3px 10px;
}
#contact_container #contact_main .mail_area form .input_item textarea::placeholder{
    color:rgb(0,0,0,0.5);
}
#contact_container #contact_main .mail_area form button.submit{
    color:white;
    font-weight:bold;
    background-color: var(--themecolor);
    border-radius:5px;
    margin-top:50px;
    margin-bottom:30px;
    padding:10px 30px;
    cursor:pointer;
}
/*******************************************************************************************
cofirm.php
*******************************************************************************************/
#cofirm_container{
    padding-top:100px;
    padding-bottom:100px;
}
#cofirm_container #cofirm_main{
    text-align:center;
    margin:0 10%;
}
#cofirm_container #cofirm_main p.comment{
    color:var(--fontcolor);
    font-size:1rem;
}
#cofirm_container #cofirm_main table{
    display:block;
    width:100%;
    margin-top:50px;
    margin-bottom:50px;
    background-color:white;
    border-radius:10px;
}
#cofirm_container #cofirm_main table tbody tr{
    display:flex;
    width:100%;
}
#cofirm_container #cofirm_main table tbody{
    display:block;
    width:100%;
}
#cofirm_container #cofirm_main table tbody tr th{
    display:inline-block;
    width:30%;
    font-size:0.9rem;
    font-weight:bold;
    color:var(--fontcolor);
    text-align:left;
    padding:10px 10px;
}
#cofirm_container #cofirm_main table tbody tr td{
    display:inline-block;
    width:70%;
    font-size:0.9rem;
    color:var(--fontcolor);
    text-align:left;
    padding:10px 10px;
}
#cofirm_container #cofirm_main form input.submit_btn{
    color:white;
    font-weight:bold;
    background-color: var(--themecolor);
    border-radius:5px;
    margin-top:50px;
    padding:10px 30px;
    cursor:pointer;
}
#cofirm_container #cofirm_main form button.return_btn{
    color:var(--fontcolor);
    font-weight:bold;
    background-color:white;
    border:1px solid var(--themecolor);
    border-radius:5px;
    margin-top:50px;
    padding:10px 30px;
    cursor:pointer;
}
/*******************************************************************************************
send.php
*******************************************************************************************/
#send_container{
    padding-top:100px;
    padding-bottom:100px;
}
#send_container #send_main p.text_area{
    color:var(--fontcolor);
    font-size:1rem;
}
#send_container #send_main a.return_btn{
    display:inline-block;
    color:var(--fontcolor);
    font-weight:bold;
    background-color:white;
    border:1px solid var(--themecolor);
    border-radius:5px;
    margin-top:50px;
    padding:10px 30px;
    cursor:pointer;
}
/*******************************************************************************************
footer トップへ戻るボタン    
*******************************************************************************************/
#footer{
    position:relative;
}
#footer #return_top_btn{
    display:block;
    width:2.5rem;
    height:2.5rem;
    right: 0;
    z-index:19;/*ハンバーガーメニュー表示中は後ろに隠す*/
    scroll-behavior:smooth;
}
#footer #return_top_btn img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}
/*******************************************************************************************
footer
*******************************************************************************************/
#footer{
    display:block;
    width:100%;
    height:auto;
}
/*フッターメニュー*/
#footer #footer_menu .footer_menu_area ul.footer_menu_lists{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:10px 0;
}
#footer #footer_menu .footer_menu_area ul.footer_menu_lists li.footer_menu_item{
    display:flex;
    height:auto;
    padding:0.5% 1%;
    border-left:1px solid var(--fontcolor);
}
#footer #footer_menu .footer_menu_area ul.footer_menu_lists li.footer_menu_item:nth-of-type(1){
    border-left:none;
}
#footer #footer_menu .footer_menu_area ul.footer_menu_lists li.footer_menu_item a.link{
    display:block;
    width:100%;
    font-size:0.9rem;
    text-align:center;
    white-space:nowrap;
}

/*コピーライト*/
#footer #copyright{
    display:block;
    width:100%;
    height:auto;
    background-color:var(--themecolor);
}
#footer #copyright .copyright_area{
    display:block;
    width:fit-content;
    height:auto;
    text-align:center;
    color:white;
    margin:0 auto;
}
#footer #copyright .webdesign_area{
    display:block;
    width:fit-content;
    height:auto;
    text-align:center;
    color:white;
    margin:0 auto;
}
/*******************************************************************************************
アニメーション（共通）
*******************************************************************************************/
/*
アニメーション（スクロール時、右下にフェードイン）
フェードイン前の初期ポジションを指定用？
*/
.anime_slideBottom {
    opacity: 0;
    transform: translateY(20px);
    transition-property:all;
    transition-duration:0.5s;
    transition-delay:0s;
    transition-timing-function:ease-in-out;
}
/*******************************************************************************************
Media Queries
*******************************************************************************************/
@media only screen and (min-width: 1930px) {

}
/* Smaller than standard 1200 */
@media only screen and (max-width: 1199px) {

}
/* Smaller than standard 980 */
@media only screen and (max-width: 991px) {

}
@media only screen and (max-width: 1024px) {

}
@media only screen and (max-width: 780px) {

}
/* Tablet Landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

}

@media only screen and (max-width: 1399px) {

}

/* All Mobile Sizes */
@media only screen and (max-width: 767px) {

}
@media only screen and (max-width: 600px) {

}

/* Mobile Portrait Size */
/*@media only screen and (max-width: 479px) {*/
@media only screen and (max-width: 768px) {
    .wrapper {
        width:100%;
        max-width:100%;
        /*margin: 0 20px;*/
        padding:0 20px;

    }
    /*PC用の文章改行を解除*/
    br.br_pc{
        display:none;
    }
    br.br_sm{
        display:block;
    }
    /*
    header
    */
    #header {
        height:10vh;
        max-height:10vh;
    }
    #header #header_menu_area #header_menu{
        height:10vh;
        max-height:10vh;
    }
    #header #header_menu_area #header_menu .title{
        width:10vh;
        height:10vh;
        line-height:10vh;
        max-height:10vh;
        margin-right:0px;
    }
    #header #header_menu_area #header_menu .logo_area .title{
        font-size:1.1rem;
    }
    #header #header_menu_area #header_menu .logo_area a.header_menu_title{
        display:block;
        width:10vh;
        height:10vh;
    }
    #header #header_menu_area #header_menu #nav{
        display:none;
    }
    #header #header_menu_area #header_menu .tel_area{
        justify-content:center;
    }
    #header #header_menu_area #header_menu .tel_area span.line1 a.telno{
        font-size:1.1rem;
        letter-spacing:0.1rem;
    }
    #header #header_menu_area #header_menu .tel_area span.line1 span.text{
        margin-right:0px;
    }
    #header #header_menu_area #header_menu .tel_area span.line2{
        display:none;
    }
    #header .hamburger_btn{
        display:block;
    }
    #header .fontsize_change_btn{
        width:40px;
        top:50vh;
        right:0;
        translate:0 -50%;
    }
    #header .fontsize_change_btn .text{
        width:40px;
    }
    #header .fontsize_change_btn .btn{
        width:40px;
    }
    #header #header_slide_menu_area{
        display:block;
    }

    /*
    main
    */
    #main{
        margin-top:0vh;
    }
    /*
    mainvisual
    */
    #mainvisual_slide{
        margin-top:9.5vh;
    }
    #mainvisual{
        width:100%;
        height:calc(100vh - 9.5vh);
        max-height:calc(100vh - 9.5vh);
    }
    /*メインビジュアル画像DIV*/
    #mainvisual div{
        height: calc(100vh - 9.5vh);
        max-height:calc(100vh - 9.5vh);
        background-position: 50% 50%;/*画像のポジション調整 横% 縦%*/
        background-size: cover; /*画像のポジション調整*/
    }
    /*メインビジュアル1枚目*/
    .anime_mainvisual div:first-of-type{
        background-image: url(/public/img/mainvisual1_phone.jpg);
        background-position:0%  0%;
    }
    /*メインビジュアル2枚目*/
    .anime_mainvisual div:nth-of-type(2){
        background-image: url(/public/img/mainvisual2_phone.jpg);
        background-position:0px 0px;
        animation-delay: 12s;
    }
    /*メインビジュアル3枚目*/
    .anime_mainvisual div:last-of-type{
        background-image: url(/public/img/mainvisual3_phone.jpg);
        background-position:0px 0px;
        animation-delay: 24s;
    }
    /*
    slogan
    */
    #slogan_area .slogan_line1{
        top:60%;
        left: calc(2% + 25px);
        font-size:1.2rem;
        letter-spacing:0.02rem;
        padding:3px 1px;
        line-height:1.5rem;
    }
    #slogan_area .slogan_line1 span.text{
        margin-bottom:10px;
    }
    #slogan_area .slogan_line1 span.name{
        font-size:2.5rem;
        color:var(--themecolor);
        font-weight:bold;
        line-height:2.5rem;
    }
    /*
    #slogan_area .slogan_line1 br{
        display:block;
    }*/
    #slogan_area .slogan_line2{
        top:100%;
        left: calc(2% + 25px);
        font-size:0.7rem;
        font-weight:normal;
        padding:3px 3px;
        letter-spacing:0.15rem;
        transform:translateY(calc(-100% - 20px));
    }
    #slogan_area .slogan_line2::after{
        width:50px;
        height:7px;
        bottom:-5px;
        left:0px;
    }
    /*
    reserved_btn_area
    */
    #reserved_btn_area{
        position:absolute;
        bottom:0px;
        left:0;
        right:0;
        transform: translateY(100%);
    }
    #reserved_btn_area .reserved_btn{
        width:100%;
    }
    #reserved_btn_area .reserved_btn .text_area .text1{
        font-size:1.0rem;
        letter-spacing:0rem;
    }
    #reserved_btn_area .reserved_btn .text_area .text2{
        font-size:0.7rem;
        letter-spacing:0.1rem;
    }
    
    /*
    concept
    */
    #concept{
        padding-top:150px;
    }
    #concept #concept_area{
        flex-direction:column;
    }
    #concept #concept_area .text_area{
        width:100%;
        padding:0;
        margin-bottom:50px;
    }
    #concept #concept_area .text_area h2{
        text-align:center;
    }
    #concept #concept_area .text_area h2:after{
        left:50%;
        transform:translateX(-50%);
    }
    #concept #concept_area .img_area{
        width:100%;
    }
    #concept #concept_area .img_area .image::after{
        width:100%;
        bottom:-25px;
        right:-10px;
        margin-right:0px;
    }
    #concept #concept_area .img_area .image img{
        width:100%;
        margin-left:0px;
        z-index:2;
    }
    /*
    product
    */
    #product .inner .content{
        padding:0;
    }
    #product .inner .content .item .item_head{
        flex-wrap:wrap;
        margin-bottom:30px;
        width:100%;
        margin-left:0px;
        padding-left:70px;
    }
    #product .inner .content .item .item_head.lumity:before{
        width:60px;
        height:60px;
        translate:0% -50%;
    }
    #product .inner .content .item .item_head.widex:before{
        width:60px;
        height:60px;
        translate:0% -50%;
    }
    #product .inner .content .item .item_head h3{
        width:100%;
    }
    #product .inner .content .item .item_head h3 span{
        font-size:1rem;
        margin-bottom:10px;
    }
    #product .inner .content .item .item_head .severity{
        width:60%;
        margin-bottom:10px;
        justify-content:start;
    }
    #product .inner .content .item .item_head .type{
        width:40%;
        justify-content:start;
        margin-left:0px;
        margin-bottom:10px;
        padding-left:5px;
    }
    #product .inner .content .item .item_head .type .tag_charging{
        width:40px;
        height:40px;
        font-size:0.5rem;
    }
    #product .inner .content .item .item_head .type .tag_battery{
        width:40px;
        height:40px;
        font-size:0.5rem;
    }
    #product .inner .content .item .item_head .type .empty{
        width:40px;
        height:40px;
        font-size:0.7rem;
    }
    #product .inner .content .item .item_body{
        height:auto;
        flex-direction:column;
        padding-left:5%;
        padding-right:5%;
    }
    #product .inner .content .item .item_body .img_area{
        width:100%;
        padding-left:0px;
    }
    #product .inner .content .item .item_text{
        font-size:1rem;
        padding-left:5%;
        padding-right:5%;
    }
    /*
    hearing_situations  
    */
    #hearing_situations .inner h2{
        font-size: 1.1rem;
    }
    #hearing_situations .inner .content_box .item{
        width:100%;
    }
    #hearing_situations .inner .content_box .item:nth-of-type(1){
        margin-right:0px;
    }
    #hearing_situations .inner .content_box .item:nth-of-type(3){
        margin-right:0px;
    }
    #hearing_situations .inner .content_box .item .explanation{
        flex-direction:column;
    }
    #hearing_situations .inner .content_box .item .explanation .img_area{
        display:block;
        width:100%;
        height:auto;
    }
    #hearing_situations .inner .content_box .item .explanation .text_area{
        width:100%;
        padding:4%;
    }
    /*
    purchase
    */
    #purchase .inner .flow .item .img_area .img_inner{
        display:block;
        width:100px;
        height:100px;
        border-radius:50%;
    }
    #purchase .inner .flow .item .img_area:after{
        content:"";
        width:3px;
        height:110%;
        bottom:0%;
        left:50%;
        transform:translate(-50%, 40%);
    }
    /*
    aftercare{
    */
    #aftercare .inner{
        padding:0;
    }
    #aftercare .inner .list .item{
        flex-direction:column;
    }
    #aftercare .inner .list .item .img_area{
        width:100%;
        margin-bottom:30px;
        order:2;
    }
    #aftercare .inner .list .item .text_area{
        display:contents;
    }
    #aftercare .inner .list .item .text_area h3{
        margin-bottom:0;
        order:1;
    }
    #aftercare .inner .list .item .text_area span.explanation{
        order:3;
    }
    /*
    question
    */
    #question .inner{
        padding:0;
    }
    /*
    access
    */
    #access .inner{
        padding:0;
    }
    #access .inner .map_area iframe{
        height:300px;
    }
    #access .inner #information{
        height:auto;
        flex-direction:column;
        max-height:none;
    }
    #access .inner #information .img_area{
        width:100%;
        height:300px;
    }
    #access .inner #information .text_area{
        display:block;
        width:100%;
        height:auto;
    }
    #access .inner #information .text_area .body .body_inner .qualification{
        text-align:left;
        flex-direction:column;
    }
    #access .inner #tel_btn a.number{
        font-size:max(3vw, 17px);
        padding:5% 10%;
    }
    #access .inner #tel_btn a.number:after{
        width:15px;
        height:15px;
        position:absolute;
        top:50%;
        right:0;
        transform:translate(-50%, -50%);
    }
    /*
    footer
    */
    #footer_menu_area{
        display:none;
    }
    #footer #footer_menu .footer_menu_area ul.footer_menu_lists{
        flex-wrap:wrap;
    }
    #footer #footer_menu .footer_menu_area ul.footer_menu_lists li.footer_menu_item{
        min-width:calc(100% / 3);
        margin-bottom:10px;
    }
    #footer #footer_menu .footer_menu_area ul.footer_menu_lists li.footer_menu_item a.link{
        font-size:0.7rem;
    }
    #footer #footer_menu .footer_menu_area ul.footer_menu_lists li.footer_menu_item:nth-of-type(1){
        border-left:1px solid var(--fontcolor);
    }
    #footer #footer_menu .footer_menu_area ul.footer_menu_lists li.footer_menu_item:nth-of-type(3){
        border-right:1px solid var(--fontcolor);
    }
    #footer #footer_menu .footer_menu_area ul.footer_menu_lists li.footer_menu_item:nth-of-type(6){
        border-right:1px solid var(--fontcolor);
    }
    #footer #footer_menu .footer_menu_area ul.footer_menu_lists li.footer_menu_item:nth-of-type(8){
        border-right:1px solid var(--fontcolor);
    }
    
    /*
    copyright
    */
    #copyright{
        margin-top:0;
    }
    #copyright .copyright_area{
        font-size:0.7rem;
    }
    #copyright .webdesign_area{
        font-size:0.7rem;
    }
    /*
    contact
    */
    #contact_container #contact_main p.explanation{
        text-align:left;
        font-size:1rem;
    }
    #contact_container #contact_main form{
        margin:50px 0 0 0;
    }
    #contact_container #contact_main form .input_item{
        flex-direction:column;
    }
    #contact_container #contact_main form .input_item label{
        font-size:0.9rem;
        width:100%;
    }
    #contact_container #contact_main form .input_item input{
        width:100%;
    }
    #contact_container #contact_main form .input_item select{
        width:100%;
    }
    #contact_container #contact_main form .input_item textarea{
        width:100%;
    }
    #contact_container #contact_main form .input_item .sex_list{
        width:100%;
    }
    /*
    cofirm
    */
    #cofirm_container #cofirm_main{
        margin:0;
    }
    #cofirm_container #cofirm_main table tbody tr{
        flex-direction:column;
    }
    #cofirm_container #cofirm_main table tbody tr th{
        width:100%;
        font-size:0.9rem;
        color:rgb(246, 244, 239);
        background-color:#845e56;
    }
    #cofirm_container #cofirm_main table tbody tr td{
        width:100%;
    }
}
@media only screen and (max-width: 320px) {

}
/* Center menu vertically */
@media screen and (min-width: 1025px) {
	
}