@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);
}
@font-face {
    font-family:'KosugiMaru';
    src: url(/public/fonts/KosugiMaru-Regular.ttf);
}
@font-face {
    font-family:'MPLUS1';
    src: url(/public/fonts/MPLUS1-VariableFont_wght.ttf);
    font-display: swap;
}
@font-face {
    font-family:'Fredoka';
    src: url(/public/fonts/Fredoka-VariableFont_wdth,wght.ttf);
    font-display: swap;
}
@font-face {
    font-family:'Hannari';
    src: url(/public/fonts/HannariMincho-Regular.otf);
    font-display: swap;
}
/*******************************************************************************************
共通処理
*******************************************************************************************/
html {
    font-size: 100%;/*フォントサイズの基本値*/
    scroll-snap-type:y proximity;/*ページ内リンク少し上に着地調整*/
    scroll-padding-top:10vh;/*ページ内リンク少し上に着地調整*/
    /*scroll-behavior:smooth;/*上に戻る挙動をスムーズ化　　問い合わせフォームの画面外のフォームエラーが表示されなくなる影響あり*/
    scroll-behavior:auto;/*上に戻る挙動をスムーズ化　　問い合わせフォームの画面外のフォームエラーが表示されなくなる影響あり*/
    transition: font-size 0.3s ease; /* なめらかにフォントサイズが切り替わる */
}
body {
    background-color:white;
    font-family:'Helvetica','Arial','Noto Sans Japanese';
    font-size: 1.0rem;
    line-height: 1.7;
}
/*中身のコンテンツ幅指定の共通クラス*/
.wrapper {
    width:1400px;
    height:100%;
    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;
}
/*タイトル用*/
.title_pc{
    display:block;
}
.title_sm{
    display:none;
}
span.block{
    display:block;
}
/*リンク*/
.link{
    color:#0073aa;
    text-decoration:underline;
}
span.inline{
    display:inline-block;
    white-space:nowrap;
}
/******************************************************************
ページネーション
******************************************************************/ 
#pagination{
    margin-top:50px;
}
#pagination button {
    font-size:1.2rem;
    margin: 5px;
    padding: 0.5em 1em;
    border: 1px solid #997768;
    background: white;
    cursor: pointer;
}
#pagination button:disabled {
    background: #997768;
    color: #fff;
    cursor: default;
}
/******************************************************************
パンくずリスト
******************************************************************/ 
.breadcrumb {
    display:block;
    width:100%;
    font-size: 0.9rem;
    text-align:left;
    padding:0.4em 0;
}
.breadcrumb a {
    color: #0073aa;
    text-decoration: none;
}
.breadcrumb a:hover {
    text-decoration: underline;
}
.breadcrumb span {
    color: #333;
    font-weight: bold;
}
/*******************************************************************************************
変数定義
*******************************************************************************************/
body{
    /*テーマカラー*/
    --themecolor:#f4f3ee;
    /*テーマカラー サブ*/
    /*--themecolor_sub:#faedcd;*/
    --themecolor_sub:#fdf6e3;
    /*テーマカラー 強調部*/
    --themecolor_emphasis:#ffab16;
    /*フォントカラー rgb(66,30,4)*/
    --fontcolor:#222222;
    /*フォントカラー　サブ*/
    --fontcolor_sub1:#f4e3dd;

    color:var(--fontcolor);
}
/*******************************************************************************************
header　共通
*******************************************************************************************/
#header{
    display:block;
    width:100%;
    max-width:100%;
    /*height:18vh;*/
    background-color:rgba(255,255,255,0.7);
    box-shadow: 0 0 8px gray;
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:10000;
}
#header #header_menu_area{
    display:block;
}
#header #header_menu_area .inner{
    display:block;
    padding:10px;
}
/*ヘッダーメニューの上側*/
#header #header_menu_area #header_menu_top{
    display:block;
    width:100%;
    color:white;
    background-color:#4087bf;
    padding:5px 10px;
}
#header #header_menu_area #header_menu_top span.text{
    display:block;
    font-size:0.9rem;
    line-height:0.9rem;
}
/*ヘッダーメニューのエリア*/
#header #header_menu_area #header_menu{
    display:flex;
    justify-content:space-between;
}
#header #header_menu_area #header_menu .logo_area{
    display:block;
    width:300px;
}
#header #header_menu_area #header_menu .logo_area span.text{
    display:block;
    font-size:0.8rem;
    line-height:0.8rem;
    text-align:left;
}
#header #header_menu_area #header_menu .logo_area .logo{
    display:block;
    width:130px;
}
#header #header_menu_area #header_menu .logo_area .logo img{
    display:block;
    width:100%;
}
#header #header_menu_area #header_menu .menu_area{
    display:flex;
}
#header #header_menu_area #header_menu .menu_area nav{
    display:flex;
    align-items:center;
    margin-right:2em;
}
#header #header_menu_area #header_menu .menu_area nav ul#nav_menu{
    display:flex;
}
#header #header_menu_area #header_menu .menu_area nav ul#nav_menu li.nav_menu_item{
    display:block;
    font-size:1.0rem;
    font-weight:bold;
    width:fit-content;
    margin:0 1em;
    padding:0.5em 0;
    position:relative;
}
#header #header_menu_area #header_menu .menu_area nav ul#nav_menu li.nav_menu_item::before{
    background: #4087bf;
    content: '';
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: 0;
    transform-origin: right top;
    transform: scale(0, 1);
    transition: transform .3s;
}
#header #header_menu_area #header_menu .menu_area nav ul#nav_menu li.nav_menu_item:hover::before{
    transform-origin: left top;
    transform: scale(1, 1);
}
#header #header_menu_area #header_menu .menu_area .sns_area{
    /*display:flex;*/
    display:none;/*一時対応*/
    justify-content:center;
    align-items:center;
    margin-right:1em;
}
#header #header_menu_area #header_menu .menu_area .sns_area .item{
    display:flex;
    width:50px;
    height:50px;
    justify-content:center;
    align-items:center;
}
#header #header_menu_area #header_menu .menu_area .sns_area .item img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}
#header #header_menu_area #header_menu .menu_area .contact_area{
    display:flex;
    justify-content:center;
    align-items:center;
}
#header #header_menu_area #header_menu .menu_area .contact_area .contact_btn{
    display:block;
}
#header #header_menu_area #header_menu .menu_area .contact_area .contact_btn a.btn{
    display:block;
    font-size:1.0rem;
    font-weight:bold;
    width:fit-content;
    color:white;
    background-color:#d81d52;
    box-shadow: 0 0 8px gray;
    border-radius:50px;
    padding:0.5em 2em;
    transition:0.2s;
}
#header #header_menu_area #header_menu .menu_area .contact_area .contact_btn a.btn:hover{
    background-color:#4087bf;
}
/*
ハンバーガメニュー（共通）
*/
#header .hamburger_btn{
    display:none;
    width:fit-content;
    margin-left:10px;
}
/*ボタン外側*/
#header .hamburger_btn .header_menu_lines{
    position: relative;/*ボタン内側を基点とする*/
    cursor: pointer;
    width: 40px;
    height:40px;
}
/*ボタン内側*/
#header .hamburger_btn .header_menu_lines span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 5px;
    height: 4px;
    border-radius: 5px;
    background: var(--fontcolor);
    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:block;
    background-color:#4087bf;
    position: fixed;
    top: 0px;
    right: 0px;
    width: 80%;
    height:100%;
    transform: translateX(100%); /* ハンバーガーメニューOFF時、右側へスライドさせておく */
    z-index:10000;
    transition: 0.4s;
    overflow-y:scroll;/*メニュー縦スクロール許可*/
    pointer-events: none; /* 非表示時はクリック不可に */
    opacity: 0;
}
#header_slide_menu_area.active{
    transform: translateX(0);
    pointer-events: auto;
    opacity: 1;
}
#header_slide_menu_area .shop_name{
    display:block;
    background-color:white;
    margin:40px 0 50px 0;
    padding:10px 0;
}
#header_slide_menu_area .shop_name a.link{
    display:flex;
    width:150px;
    height:auto;
    justify-content:center;
    align-items:center;
    margin-left:10px;
}
#header_slide_menu_area ul.header_slide_menu{
    padding:0 30px;
}
#header_slide_menu_area ul.header_slide_menu li{
    color:white;
    text-align:justify;
    margin-bottom:10px;
}
#header_slide_menu_area ul.header_slide_menu_2{
    padding:0 30px;
    margin-top:30px;
}
#header_slide_menu_area ul.header_slide_menu_2 li{
    color:white;
    font-size:0.8rem;
    text-align:justify;
    padding:0 1.3em;
    margin-bottom:10px;
    position:relative;
}
#header_slide_menu_area ul.header_slide_menu_2 li::before{
    content:"";
    display:block;
    width:1em;
    height:1em;
    background-image:url(/public/img/caret-right-solid-full-white.svg);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
    position:absolute;
    top:50%;
    left:0;
    translate:0 -50%;
}
#header_slide_menu_area .contact_area{
    padding:0 30px;
}
#header_slide_menu_area .contact_area a.contact_btn{
    display:flex;
    width:400px;
    max-width:100%;
    font-weight:bold;
    color:white;
    justify-content:center;
    align-items:center;
    background-color:#d81d52;
    border:5px solid #d81d52;
    border-radius:50px;
    box-shadow: 0 0 6px gray;
    padding:0.5em 1em;
    margin-top:50px;
}
#header_slide_menu_area .sns_area{
    /*display:flex;*/
    display:none;/*一時対応*/
    padding:1em;
    justify-content:center;
    align-items:center;
    border-radius:5px;
    position:relative;
}
#header_slide_menu_area .sns_area .item{
    display:flex;
    width:50px;
    height:50px;
    margin:0 10px;
}
#header_slide_menu_area .sns_area .item a.sns_btn{
    display:flex;
    width:100%;
    height:100%;
}
#header_slide_menu_area .sns_area .item a.sns_btn img{
    display:flex;
}
#header_slide_menu_area .close_btn{
    display:block;
    width:fit-content;
    z-index:100;
    position:absolute;
    top:0;
    left:0;
}
/*ボタン外側*/
#header_slide_menu_area .close_btn .header_menu_lines{
    position: relative;/*ボタン内側を基点とする*/
    cursor: pointer;
    width: 40px;
    height:40px;
}
/*ボタン内側*/
#header_slide_menu_area .close_btn .header_menu_lines span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 5px;
    height: 4px;
    border-radius: 5px;
    background: white;
    width: 75%;
}
#header_slide_menu_area .close_btn .header_menu_lines span:nth-of-type(1) {
    transform:translateY(-50%);
    top: 12px;
    left:10px;
    transform: translateY(6px) rotate(-45deg);
    width: 50%;
}
#header_slide_menu_area .close_btn .header_menu_lines span:nth-of-type(2) {
    opacity: 0;
}
#header_slide_menu_area .close_btn .header_menu_lines span:nth-of-type(3) {
    top: 24px;
    left: 10px;
    transform: translateY(-6px) rotate(45deg);
    width: 50%;
}
/*******************************************************************************************
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:9999;
}
#mask_area.active{
    display:block;
}
/*******************************************************************************************
mainvisual
*******************************************************************************************/
.page-index #mainvisual{
    display:block;
    width:100%;
    height:100vh;
    overflow:hidden;
    position:relative;
}
.page-index #mainvisual .inner{
    display:block;
    width:100%;
    height:100%;
    position:relative;
}
.page-index #mainvisual .inner .mainvisual_area{
    display:block;
    width:100%;
    height:100%;
}
.page-index #mainvisual .inner .mainvisual_area .item{
    display:block;
    width:100%;
    height:100%;
    position:relative;
}
.page-index #mainvisual .inner .mainvisual_area .item:after{
    content:"";
    display:block;
    width:100%;
    height:100%;
    background-color:rgba(255,255,255,0.6);
    position:absolute;
    top:0;
    left:0;
    z-index:2;
}
.page-index #mainvisual .inner .mainvisual_area .item img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
.page-index #mainvisual .inner .title_area{
    display:block;
    width:fit-content;
    position:absolute;
    top:30%;
    left:3%;
    z-index:10;
}
.page-index #mainvisual .inner .title_area .inner{ 
    display:block;
    width:100%;
    height:100%;
}
.page-index #mainvisual .inner .title_area .inner p.title{
    font-size:4.5rem;
    font-weight:bold;
    line-height:5rem;
}
.page-index #mainvisual .inner .title_area .inner p.title span.text1 span.blue_text{
    color:#4087bf;
}
.page-index #mainvisual .inner .cost_area{
    display:flex;
    position:absolute;
    bottom:0;
    left:3%;
    translate:0 -30%;
    z-index:10;
}
.page-index #mainvisual .inner .cost_area .item{
    display:block;
    width:200px;
}
.page-index #mainvisual .inner .cost_area .item img{
    filter: drop-shadow(5px 5px 5px #aaa);  
}

/*******************************************************************************************
slick
*******************************************************************************************/
.slick-list{
    height:100%;
}
.slick-track{
    height:100%;
}
.slick-prev{
    position:absolute;
    left:0;
    z-index:100;
}
.slick-prev::before {
    content:"";
    display:block;
    width:15px;
    height:15px;
    left: 0;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: translateX(100%) rotate(45deg);
    position:relative;
    z-index:5;
}
.slick-next{
    position:absolute;
    right:0;
    z-index:100;
}
.slick-next::before {
    content:"";
    display:block;
    width:15px;
    height:15px;
    right: 0;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: translateX(-100%) rotate(45deg);
    position:relative;
    z-index:5;
}

/*slickの初期化前に表示では縦並びに表示されるため*/
.slick_list.main {
    visibility: hidden; /* 初期化前は見せないが、レイアウトは保持 */
}
.slick_list.main.slick-initialized {
    visibility: visible; /* 初期化後に見せる */
}
/*******************************************************************************************
h1,h2　（非表示）
*******************************************************************************************/
.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;
}
/*******************************************************************************************
about
*******************************************************************************************/
.page-index #about{
    padding-top:200px;
    padding-bottom:100px;
}
.page-index #about .inner h2{
    display:block;
    width:fit-content;
    font-size:2.5rem;
    font-weight:bold;
    margin:0 auto;
    position:relative;
}
.page-index #about .inner h2:after{
    content:"";
    display:block;
    width:100%;
    height:2px;
    background-color:#111111;
    position:absolute;
    bottom:0;
    left:50%;
    translate:-50% 100%;
}
.page-index #about .list{
    display:grid;
    row-gap: 70px;
    margin-top:50px; 
}
.page-index #about .list .item {
    display: grid;
    grid-template-columns: 1fr 40%;
    align-items: start; /* 上揃えにしたい場合 */
    column-gap: 24px;
}
/* 左カラムにタイトルと説明をまとめる */
.page-index #about .list .item h3 {
    grid-column: 1;
    grid-row: 1; /* 左上セル */
    margin: 0 0 12px;
    text-align:left;
}
.page-index #about .list .item p.text {
    color:#231815;
    grid-column: 1;
    grid-row: 2; /* 左下セル */
    margin: 0;
    padding-left:20px;
    text-align:justify;
}
/* 偶数番目だけ左右反転 */
.page-index #about .list .item:nth-of-type(2) {
    grid-template-columns: 40% 1fr; /* 左画像、右テキスト */
}
.page-index #about .list .item:nth-of-type(2) .img_area {
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-self: start;
}
.page-index #about .list .item:nth-of-type(2) h3 {
    grid-column: 2;
    grid-row: 1;
}
.page-index #about .list .item:nth-of-type(2) p.text {
    grid-column: 2;
    grid-row: 2;
}
/* 右カラムの画像は1〜2行ぶち抜き */
.page-index #about .list .item .img_area {
    grid-column: 2;
    grid-row: 1 / span 2; /* 2行分を占有（セル結合） */
    align-self: center; /* 縦中央揃えにしたい場合 */
    justify-self: end;  /* 横右寄せ */
}
.page-index #about .list .item .img_area img {
    display: block;
    max-width: 100%;
    height: auto;
}
.page-index #about .inner .list .item h3{
    display:block;
    font-size:2rem;
    line-height:2.5rem;
    position:relative;
    padding:0.3em 0 0.3em 150px;
}
.page-index #about .inner .list .item h3:before{
    content:"";
    display:block;
    width:150px;
    height:150px;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:contain;
    position:absolute;
    top:50%;
    left:0;
    translate:0% -50%;
}
.page-index #about .inner .list .item:nth-of-type(1) h3:before{
    background-image:url(/public/img/about_no1.svg);
}
.page-index #about .inner .list .item:nth-of-type(2) h3:before{
    background-image:url(/public/img/about_no2.svg);
}
.page-index #about .inner .list .item:nth-of-type(3) h3:before{
    background-image:url(/public/img/about_no3.svg);
}
.page-index #about .inner .list .item figure.img_area img.fade-image-right{
    -webkit-mask-image: linear-gradient(to right, black 70%, transparent 100%);
    mask-image: linear-gradient(to right, black 70%, transparent 100%);
}
.page-index #about .inner .list .item figure.img_area img.fade-image-left{
    -webkit-mask-image: linear-gradient(to left, black 70%, transparent 100%);
    mask-image: linear-gradient(to left, black 70%, transparent 100%);
}

/*
.page-index #about .inner .list{
    display:flex;
    width:100%;
    flex-direction:column;
    margin-top:100px;
}
.page-index #about .inner .list .item{
    display:flex;
    width:100%;
    justify-content:space-between;
    margin-bottom:100px;
}
.page-index #about .inner .list .item .text_area{
    display:flex;
    width:70%;
    align-items:center;
}
.page-index #about .inner .list .item:nth-of-type(2) .text_area{
    padding-left:10%;
}
.page-index #about .inner .list .item .text_area .inner{
    display:block;
    text-align:left;
}
.page-index #about .inner .list .item .text_area .inner p.text{
    color:#333333;
    font-size:1.2rem;
    margin-top:20px;
    margin-left:20px;
    padding-right:50px;
}
.page-index #about .inner .list .item .text_area h3{
    display:block;
    font-size:2rem;
    line-height:2.5rem;
    position:relative;
    padding:0.3em 0 0.3em 150px;
}
.page-index #about .inner .list .item .text_area h3:before{
    content:"";
    display:block;
    width:150px;
    height:150px;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:contain;
    position:absolute;
    top:50%;
    left:0;
    translate:0% -50%;
}
.page-index #about .inner .list .item:nth-of-type(1) .text_area h3:before{
    background-image:url(/public/img/about_no1.svg);
}
.page-index #about .inner .list .item:nth-of-type(2) .text_area h3:before{
    background-image:url(/public/img/about_no2.svg);
}
.page-index #about .inner .list .item:nth-of-type(3) .text_area h3:before{
    background-image:url(/public/img/about_no3.svg);
}
.page-index #about .inner .list .item .img_area{
    display:block;
    width:30%;
}
.page-index #about .inner .list .item .img_area img.fade-image-right{
    -webkit-mask-image: linear-gradient(to right, black 70%, transparent 100%);
    mask-image: linear-gradient(to right, black 70%, transparent 100%);
}
.page-index #about .inner .list .item .img_area img.fade-image-left{
    -webkit-mask-image: linear-gradient(to left, black 70%, transparent 100%);
    mask-image: linear-gradient(to left, black 70%, transparent 100%);
}


*/
/*******************************************************************************************
worries
*******************************************************************************************/
.page-index #worries{
    padding-top:100px;
    padding-bottom:30px;
    background-color:#f0f0f0;
}
.page-index #worries .inner h2{
    display:block;
    width:fit-content;
    color:#222222;
    font-size:2.5rem;
    font-weight:bold;
    margin:0 auto;
    position:relative;
}
.page-index #worries .inner h2 span.red{
    font-size:3rem;
    color:#d81d52;
}
.page-index #worries .inner h2::before{
    content:"";
    display:block;
    width:200px;
    height:200px;
    background-image:url(/public/img/worries_design_img.png);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
    position:absolute;
    top:50%;
    right:0;
    translate:100% -50%;
    z-index:1;
}
.page-index #worries .inner ul.list{
    display:block;
    width:800px;
    text-align:left;
    font-size:1.3rem;
    color:white;
    background-color:#4087bf;
    border-radius:30px;
    padding:1em;
    margin:50px auto 0 auto;
    position:relative;
    z-index:1;
}
.page-index #worries .inner ul.list::after{
    content:"";
    display:block;
    width:200px;
    height:100px;
    background-image:url(/public/img/worries_down_arrow.png);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
    position:absolute;
    bottom:0;
    left:50%;
    translate:-50% calc(100% + 20px);
    z-index:3;
}
.page-index #worries .inner ul.list li{
    display:block;
    width:100%;
    padding:0.5em 1.5em;
    border-bottom:1px dotted white;
    position:relative;
}
.page-index #worries .inner ul.list li::before{
    content:"";
    display:block;
    width:1em;
    height:1em;
    background-image:url(/public/img/square-check-solid-white.svg);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
    position:absolute;
    top:50%;
    left:0;
    translate:0 -50%;
}
.page-index #worries .inner ul.list li:last-child{
    border-bottom:none;
}
.page-index #worries .inner .under_area{
    display:block;
    width:fit-content;
    font-size:1.5rem;
    font-weight:bold;
    color:white;
    background-color:#d81d52;
    /*border:10px solid #f6d1d8;*/
    border-radius:100px;
    margin:150px auto 50px auto;
    padding:1em 2em;
    position:relative;
    z-index: 1;
}
.page-index #worries .inner .under_area p span{
    font-size:2rem;
    margin-right:0.5em;
    border-bottom:3px solid white;
}
.page-index #worries .inner .under_area::before{
    content:"";
    display:block;
    width:230px;
    height:230px;
    background-image:url(/public/img/worries_design_img2.png);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
    position:absolute;
    top:50%;
    left:0;
    translate:-100% -50%;
    z-index:1;

}
/*******************************************************************************************
service
*******************************************************************************************/
.page-index #service{
    padding-top:100px;
    padding-bottom:30px;
    background-color:white;
}
.page-index #service .inner h2{
    display:block;
    width:fit-content;
    font-size:2.5rem;
    font-weight:bold;
    margin:0 auto;
    position:relative;
}
.page-index #service .inner h2:after{
    content:"";
    display:block;
    width:100%;
    height:2px;
    background-color:#111111;
    position:absolute;
    bottom:0;
    left:50%;
    translate:-50% 100%;
}
.page-index #service .inner .list{
    display:flex;
    width:100%;
    justify-content:center;
    margin-top:50px;
}
.page-index #service .inner .list .item{
    display:block;
    width:150px;
    background-color:#c8e4ec;
    border-radius:10px;
    padding:0.4em 1em;
    margin:1em;
    position:relative;
}
.page-index #service .inner .list .item .img_area{
    display:block;
    width:100%;
}
.page-index #service .inner .list .item .img_area .inner{
    display:block;
}
.page-index #service .inner .list .item .text_area .inner p.title{
    color:#004aad;
    font-size:1rem;
    font-weight:bold;
    line-height:1.5rem;
}
.page-index #service .inner .list .item .tooltip {
    display: block;
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
    right:0;
}
.page-index #service .inner .list .item .tooltip .tooltip-text{
    display:block;
    width: 180px;
    background-color: #333;
    color: #fff;
    font-size: 14px;
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    visibility: hidden;
    opacity: 0;
    z-index: 2;
    transition: opacity 0.3s;
    pointer-events: none;
    position:absolute;
    bottom:0;
    left:50%;
    translate:-50% 70%;
}
.page-index #service .inner .list .item:hover .tooltip-text{
    visibility: visible;
    opacity: 1;
}
.page-index #service .inner .list .item .tooltip .tooltip-text:after{
    content: "";
    position: absolute;
    top: 0%; /* 吹き出しの下部に設置 */
    left: 50%;
    translate:-50% -100%;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
}
/*******************************************************************************************
flow
*******************************************************************************************/
.page-index #flow{
    padding-top:100px;
    padding-bottom:30px;
    background-color:#4087bf;
}
.page-index #flow .inner h2{
    display:block;
    width:fit-content;
    color:white;
    font-size:2.5rem;
    font-weight:bold;
    margin:0 auto;
    position:relative;
}
.page-index #flow .inner .list{
    display:flex;
    width:100%;
    justify-content:center;
    margin-top:30px;
}
.page-index #flow .inner .list .item{
    display:flex;
    width:20%;
    flex-direction:column;
    background-color:white;
    margin:1em;
}
.page-index #flow .inner .list .item .step_area{
    display:block;
    width:100%;
    text-align:center;
    background-color:#f0f0f0;
}
.page-index #flow .inner .list .item .step_area p.text{
    font-weight:bold;
    letter-spacing:0.05rem;
}
.page-index #flow .inner .list .item .img_area{
    display:block;
    width:100%;
    padding:5%;
}
.page-index #flow .inner .list .item .img_area .inner{
    display:block;
    width:100%;
    border:1px solid #f0f0f0;
}
.page-index #flow .inner .list .item .img_area .inner img{
    display:block;
}
.page-index #flow .inner .list .item .text_area{
    display:block;
    width:100%;
    padding:5%;
}
.page-index #flow .inner .list .item .text_area .inner{
    display:block;
    width:100%;
}
.page-index #flow .inner .list .item .text_area .inner span.title{
    display:block;
    width:100%;
    text-align:center;
    font-weight:bold;
    margin-bottom:10%;
}
.page-index #flow .inner .list .item .text_area .inner p.text{
    display:block;
    color:#231815;
    text-align:justify;
    font-size:0.9rem;
    margin-bottom:1em;
}
/*******************************************************************************************
price
*******************************************************************************************/
.page-index #price{
    padding-top:100px;
    padding-bottom:30px;
    background-color:#f0f0f0;
}
.page-index #price .inner h2{
    display:block;
    width:fit-content;
    color:#222222;
    font-size:2.5rem;
    font-weight:bold;
    margin:0 auto;
    position:relative;
}
.page-index #price .inner .list{
    display:flex;
    width:100%;
    justify-content:center;
    margin-top:50px;
}
.page-index #price .inner .list .item{
    display:block;
    width:30%;
    background-color:white;
    border-radius:10px;
    margin:0.5em 1em;
}
.page-index #price .inner .list .item:nth-of-type(1){
    border:5px solid #3399bb;
}
.page-index #price .inner .list .item:nth-of-type(2){
    border:5px solid #2ba583;
}
.page-index #price .inner .list .item:nth-of-type(3){
    border:5px solid #d46468;
}
.page-index #price .inner .list .item .title_area{
    display:block;
    width:100%;
    font-size:1.5rem;
    font-weight:bold;
    line-height:1.5rem;
    color:white;
    padding:0.3em 0;
}
.page-index #price .inner .list .item:nth-of-type(1) .title_area{
    background-color:#3399bb;
}
.page-index #price .inner .list .item:nth-of-type(2) .title_area{
    background-color:#2ba583;
}
.page-index #price .inner .list .item:nth-of-type(3) .title_area{
    background-color:#d46468;
}
.page-index #price .inner .list .item .price_area{
    display:block;
    width:100%;
    font-size:2rem;
    font-weight:bold;
    line-height:2rem;
    color:white;
    padding:0.3em 0;
}
.page-index #price .inner .list .item:nth-of-type(1) .price_area{
    background-color:#3399bb;
}
.page-index #price .inner .list .item:nth-of-type(2) .price_area{
    background-color:#2ba583;
}
.page-index #price .inner .list .item:nth-of-type(3) .price_area{
    background-color:#d46468;
}
.page-index #price .inner .list .item:nth-of-type(1) .price_area span.price{
    font-size:3rem;
    margin-right:10px;
}
.page-index #price .inner .list .item:nth-of-type(2) .price_area span.price{
    font-size:3rem;
    margin-right:10px;
}
.page-index #price .inner .list .item:nth-of-type(3) .price_area span.price{
    font-size:2.2rem;
    margin-right:10px;
}
.page-index #price .inner .list .item .price_area span.text{
    font-size:1.0rem;

}
.page-index #price .inner .list .item .content_area{
    display:block;
    width:100%;
    padding:30px;
}
.page-index #price .inner .list .item .content_area .explanation_area{
    display:block;
    width:100%;
    color:#231815;
    text-align:justify;
    margin-bottom:30px;
}
.page-index #price .inner .list .item .content_area .box{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1em;
    grid-auto-rows: auto !important;   /* ← まずは確実にオフにする */
}
.page-index #price .inner .list .item .content_area .box .box_item{
    display: flex;
    min-width: 0;   /* ← これで子がちゃんと縮む */
    flex-direction: column;
    justify-content: space-between;
    padding: 0.5em;
    border-radius: 10px;
    height: 100%; /* gridで高さが統一される */
}
.page-index #price .inner .list .item:nth-of-type(1) .content_area .box .box_item{
    background-color:#eaf4f8;
    border:2px solid #3399bb;
    border-radius:10px;
}
.page-index #price .inner .list .item:nth-of-type(2) .content_area .box .box_item{
    background-color:#e5f5f1;
    border:2px solid #2ba583;
    border-radius:10px;
}
.page-index #price .inner .list .item:nth-of-type(3) .content_area .box .box_item{
    background-color:#fceeee;
    border:2px solid #d46468;
    border-radius:10px;
}
.page-index #price .inner .list .item .content_area .box .box_item.gray_filter{
    background-color:#F1F1F1;
    border:2px solid #5D5D5D;
    position:relative;
    overflow:hidden;
}
/*訂正線*/
.page-index #price .inner .list .item .content_area .box .box_item.gray_filter .diagonal_svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
}
.page-index #price .inner .list .item .content_area .box .box_item.gray_filter .diagonal_svg line {
    shape-rendering: geometricPrecision;
}
.page-index #price .inner .list .item .content_area .box .box_item .icon_area{
    display:block;
    width:100%;
}
.page-index #price .inner .list .item .content_area .box .box_item .icon_area .icon_inner{
    aspect-ratio: 1 / 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-index #price .inner .list .item .content_area .box .box_item .icon_area .icon_inner img{
    display:block;
}
.page-index #price .inner .list .item .content_area .box .box_item .name_area{
    font-size: 0.7rem;
    line-height: 1.0rem;
    text-align: center;
    letter-spacing: 0.2em; /* 文字間を広げる */
    overflow-wrap: anywhere;  /* ← 長い語を強制改行 */
    word-break: break-word;   /* 保険 */
}
.page-index #price .inner .list .item .content_area .box .grid_divider{
    grid-column:1 / -1;          /* ← 全カラムを跨ぐ */
    height:0;                     /* 本文の高さは0にして */
    border:none;
    border-top:1px solid #ddd;    /* 横線だけ見せる */
    margin:8px 0;                 /* 上下の余白 */
}
.page-index #price .inner .list .item .content_area .comment_area{
    display:block;
    width:100%;
    font-size:0.8rem;
    color:#231815;
    text-align:justify;
    margin-top:20px;
}
.page-index #price .emphasis{
    font-weight:bold;
    color:#d81d52;
}
.page-index #price .inner p.supplement{
    display:block;
    max-width:800px;
    text-align:center;
    margin:10px auto;
}
.page-index #price .inner p.supplement span.text{
    border-bottom:1px dotted #111111;
}
.page-index #price .inner p.supplement2{
    display:block;
    max-width:800px;
    font-size:0.8rem;
    text-align:center;
    margin:10px auto;
}
/*******************************************************************************************
production
*******************************************************************************************/
.page-index #production{
    padding-top:100px;
    padding-bottom:30px;
    background-color:#4087bf;
}
.page-index #production .inner h2{
    display:block;
    width:fit-content;
    color:white;
    font-size:2.5rem;
    font-weight:bold;
    margin:0 auto;
    position:relative;
}
.page-index #production .inner p.comment{
    color:white;
    margin-bottom:50px;
}
.page-index #production .inner .list{
    display:grid;
    width:100%;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}
.page-index #production .inner .list .item .img_area{
    background-color:white;
    border-radius:5px;
    box-shadow: 0 0 8px black;
    position:relative;
}
.page-index #production .inner .list .item .img_area img{
    display:block;
    transition: transform .6s ease;
}
.page-index #production .inner .list .item .img_area:hover img{
    transform: scale(1.1);
}
.page-index #production .inner .list .item .img_area:after{
    content:"";
    display:block;
    width:100%;
    height:100%;
    background-color:rgba(255,255,255,0.5);
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    transition: opacity 0.4s ease; /* 徐々に表示 */
    z-index:2;
}
.page-index #production .inner .list .item .img_area:hover:after{
    opacity:1;
}
.page-index #production .inner .list .item .text_area{
    display:block;
    width:100%;
    padding:3% 5% 5% 5%;
}
.page-index #production .inner .list .item .text_area span.title{
    display:block;
    color:white;
    font-size:1rem;
    font-weight:bold;
}
.page-index #production .inner .list .item .text_area span.category{
    display:block;
    color:white;
    font-size:0.8rem;
}
/*******************************************************************************************
access
*******************************************************************************************/
.page-index #access{
    padding-top:100px;
    padding-bottom:30px;
    background-color:#4087bf;
}
.page-index #access .inner h2{
    display:block;
    width:fit-content;
    color:white;
    font-size:2.5rem;
    font-weight:bold;
    margin:0 auto;
    position:relative;
}
/*******************************************************************************************
Information
*******************************************************************************************/
.page-index #Information{
    padding-top:100px;
    padding-bottom:100px;
    background-color:white;
}
.page-index #Information .inner{
    display:block;
    width:800px;
    margin:0 auto;
}
.page-index #Information .inner h2{
    display:block;
    width:fit-content;
    color:#222222;
    font-size:2.5rem;
    font-weight:bold;
    margin:0 auto;
    position:relative;
}
.page-index #Information .inner h2:after{
    content:"";
    display:block;
    width:100%;
    height:2px;
    background-color:#111111;
    position:absolute;
    bottom:0;
    left:50%;
    translate:-50% 0;
}
.page-index #Information .inner .img_box{
    display:block;
    width:100%;
    margin:50px auto;
}
.page-index #Information .inner p.name{
    font-size:1.3rem;
}
.page-index #Information .inner dl{
    display:grid;
    width:100%;
    grid-template-columns: 1fr;
    margin:30px auto;
}
.page-index #Information .inner .row{
    display: grid;
    grid-template-columns: 150px 1fr; /* 左右の幅指定 */
    border-bottom: 1px solid #ccc;   /* 行ごとに下線 */
    padding: 0.5em 0;   
}
.page-index #Information .inner .row:nth-of-type(1){
    border-top: 1px solid #ccc;   /* 行ごとに下線 */
    padding: 0.5em 0;   
}
.page-index #Information .inner .row dt{
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:left;
    color:#231815;
    background-color:#f0f0f0;
    padding:0.5em 1em;
}
.page-index #Information .inner .row dd{
    text-align:left;
    color:#231815;
    padding:0.5em 1em;
}
/*******************************************************************************************
cta_banner
*******************************************************************************************/
.page-index #cta_banner{
    display:block;
    width:100%;
    background-color:white;
    margin:70px auto;
}
.page-index #cta_banner a.content{
    display:block;
    width:100%;
    max-width:800px;
    box-shadow: 0 0 8px black;
    border-radius:10px;
    overflow:hidden;
    margin:0 auto;
    position:relative;
}
.page-index #cta_banner a.content:after{
    content:"";
    display:block;
    width:100%;
    height:100%;
    background-color:rgba(255,255,255,0.5);
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    transition: opacity 0.4s ease; /* 徐々に表示 */
    z-index:2;
}
.page-index #cta_banner a.content:hover:after{
    opacity:1;
}
.page-index #cta_banner a.content img{
    display:block;
    object-fit:cover;
}
/*******************************************************************************************
about
*******************************************************************************************/
.page-about #main{
    margin-top:150px;
}
.page-about #about .inner h2 {
    display: block;
    width: fit-content;
    font-size: 2.5rem;
    font-weight: bold;
    margin: 0 auto;
    position: relative;
}
.page-about #about .inner .text_area{
    display:block;
    max-width:100%;
    color:#231815;
    text-align:justify;
    margin-top:50px;
}
.page-about #about .inner .text_area p.text{
    display:block;
    margin-bottom:10px;
}
.page-about #about .inner .img_box{
    display:flex;
    width:100%;
    justify-content:center;
    margin-top:50px;
    margin-bottom:100px;
}
.page-about #about .inner .img_box .item{
    display:block;
    width:45%;
    margin:0 5%;
}
.page-about #about .inner .img_box .item a.img_area{
    display:block;
    width:100%;
    height:100%;
    border:10px solid white;
    filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.5));
}
.page-about #about .inner .img_box .item .img_area img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
.page-about #about .inner .img_box .item .link_area{
    display:block;
    width:fit-content;
    text-align:left;
    border-bottom:1px dotted #111111;
    padding:0.5em 0.5em 0.5em 1em;
    position:relative;
    cursor:pointer;
}
.page-about #about .inner .img_box .item .link_area:after{
    content:"";
    display:block;
    width:1em;
    height:1em;
    background-image:url(/public/img/caret-right-solid-full.svg);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
    position:absolute;
    top:50%;
    left:0;
    translate:0 -50%;
}
.page-about #about .inner .banner_area{
    display:block;
    width:100%;
    margin:50px auto 100px auto;
}
.page-about #about .inner .banner_area a.banner{
    display:block;
    width:800px;
    max-width:100%;
    margin:0 auto;
    filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.5));
}
.page-about #about .inner .banner_area a.banner img{
    display:block;
    width:100%;
    object-fit:cover;
}
/*******************************************************************************************
contact
*******************************************************************************************/
.page-contact #main{
    margin-top:150px;
}
.page-contact #contact .inner h2 {
    display: block;
    width: fit-content;
    font-size: 2.5rem;
    font-weight: bold;
    margin: 0 auto;
    position: relative;
}
.page-contact #contact .inner .explanation{
    display:block;
    width:800px;
    color:#231815;
    text-align:left;
    margin:50px auto 10px auto;
}
.page-contact #contact .inner .ifa_area{
    margin-top:50px;
}
.page-contact #contact .inner .tell_area{
    display:block;
    width:100%;
    border-top:1px solid #4087bf;
    margin-top:100px;
    padding-top:50px;
}
.page-contact #contact .inner .tell_area a.tell_btn{
    display:block;
    width:fit-content;
    max-width:100%;
    font-size:1.3rem;
    color:white;
    background-color:#4087bf;
    border-radius:50px;
    margin:50px auto 0 auto;
    padding:0.5em 3em;
    position:relative;
}
.page-contact #contact .inner .tell_area a.tell_btn:hover{
    background-color: #d81d52;
}
.page-contact #contact .inner .tell_area a.tell_btn:after{
    content:"";
    display:block;
    width:20px;
    height:20px;
    background-image:url(/public/img/chevron-right-solid-full-white.svg);
    background-position:center center;
    background-size:contain;
    background-repeat:no-repeat;
    position:absolute;
    top:50%;
    right:0;
    translate:-50% -50%;
}
.page-contact #contact .inner .tell_area span.tell_text{
    display:block;
    width:100%;
    font-size:2.7rem;
    font-weight:bold;
    color:#4087bf;
    margin-bottom:100px;
}
/*******************************************************************************************
privacy
*******************************************************************************************/
.page-privacy #main{
    margin-top:150px;
}
.page-privacy #privacy .inner h2 {
    display: block;
    width: fit-content;
    font-size: 2.5rem;
    font-weight: bold;
    margin: 0 auto;
    position: relative;
}
.page-privacy #privacy .inner .text_area{
    display:block;
    text-align:justify;
    margin:50px 0 100px 0;
}
.page-privacy #privacy .inner .text_area h3{
    display:block;
    font-size:1.7rem;
    font-weight:bold;
    text-align:left;
    padding:0.3em 1em;
    margin:2em 0;
    position:relative;
}
.page-privacy #privacy .inner .text_area h3:before{
    content:"";
    display:block;
    width:5px;
    height:100%;
    background-color:#4087bf;
    position:absolute;
    top:0;
    left:0;
}
.page-privacy #privacy .inner .text_area .text{
    padding:0.5em 0;
}
.page-privacy #privacy .inner .text_area .text a.link{
    display:block;
    padding:0 1em;
    position:relative;
}
.page-privacy #privacy .inner .text_area .text a.link:after{
    content:"";
    display:block;
    width:1em;
    height:1em;
    background-image:url(/public/img/caret-right-solid-full.svg);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
    position:absolute;
    top:50%;
    left:0;
    translate:0 -50%;
}
.page-privacy #privacy .inner .text_area ol{
    display:block;
    margin:0 2em;
    list-style-type: decimal;
}
.page-privacy #privacy .inner .text_area ol li{
    padding:0.5em 0;
}
.page-privacy #privacy .inner .text_area ol li::marker{
    font-size:120%;
    font-weight:bold;
    color:#4087bf;
}
/*******************************************************************************************
iframe  
*******************************************************************************************/
.ifr_area iframe{
    display: block;
    width: 100%;
    min-height: 1300px;   /* 初回表示は縦長でも白が出にくいよう広め */
    background: #fff;     /* 再描画時のチラつき対策 */
    border: 0;
}
#gform {
    display: block;
    width: 100%;
    min-height: 1300px;   /* 初回表示は縦長でも白が出にくいよう広め */
    background: #fff;     /* 再描画時のチラつき対策 */
    border: 0;
}
/*******************************************************************************************
footer トップへ戻るボタン    
*******************************************************************************************/
#footer{
    display:block;
    width:100%;
    height:auto;
    background-color:var(--themecolor);
    position:relative;
}
#footer #return_top_btn{
    display:block;
    width:3.5rem;
    height:3.5rem;
    right: 0;
    z-index:19;/*ハンバーガーメニュー表示中は後ろに隠す*/
    scroll-behavior:smooth;
}
#footer #return_top_btn img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.5));
}
/*******************************************************************************************
footer
*******************************************************************************************/
#footer #footer_menu{
    background-color:#3153a4;
    padding-top:50px;
}
#footer #footer_menu .inner{
    display:flex;
    width:100%;
    height:auto;
    flex-wrap:wrap;
}
#footer #footer_menu .inner .menu_area{
    display:flex;
    width:100%;
    height:auto;
    flex-wrap:wrap;
    justify-content:center;
}
#footer #footer_menu .inner .menu_area ul.list{
    display:flex;
    width:100%;
    height:auto;
    justify-content:center;
    margin-bottom:30px;
}
#footer #footer_menu .inner .menu_area ul.list li.list_item{
    display:flex;
    width:auto;
    height:auto;
    padding:0 1%;
}
#footer #footer_menu .inner .menu_area ul.list li.list_item a.btn{
    display:block;
    width:fit-content;
    height:auto;
    color:#333333;
    background-color:#f0f0f0;
    border:1px solid #333333;
    border-radius:50px;
    white-space:nowrap;
    padding:1em 2em;
    font-size:1rem;
    line-height:1rem;
}
#footer #footer_menu .inner .menu_area ul.list2{
    display:flex;
    width:100%;
    justify-content:center;
    margin-bottom:30px;
}
#footer #footer_menu .inner .menu_area ul.list2 li.list_item2{
    font-size:0.9rem;
    width:auto;
    height:auto;
    color:white;
    padding:0 1%;
    border-left:1px solid white;
}
#footer #footer_menu .inner .menu_area ul.list2 li.list_item2:last-child{
    border-right:1px solid white;
}
/*コピーライト*/
#footer #copyright{
    display:block;
    width:100%;
    height:auto;
    color:white;
    background-color:#3153a4;
}
#footer #copyright .copyright_area{
    display:block;
    width:fit-content;
    height:auto;
    text-align:center;
    margin:0 auto;
}
#footer #copyright .copyright_area p{
    font-size:0.8rem;
}
#footer #copyright .webdesign_area{
    display:block;
    width:fit-content;
    height:auto;
    text-align:center;
    margin:0 auto;
}
#footer #copyright .webdesign_area p{
    font-size:0.7rem;
}
/*******************************************************************************************
アニメーション（共通）
*******************************************************************************************/
/*
アニメーション（スクロール時、右下にフェードイン）
フェードイン前の初期ポジションを指定用？
*/
.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%;
        padding:0 20px;

    }
    /*PC用の文章改行を解除*/
    br.br_pc{
        display:none;
    }
    br.br_sm{
        display:block;
    }
    /*タイトル用*/
    .title_pc{
        display:none;
    }
    .title_sm{
        display:block;
    }
    /*header*/
    #header #header_menu_area #header_menu_top {
        padding:5px 10px;
    }
    #header #header_menu_area #header_menu_top span.text{
        text-align:center;
        font-size:0.7rem;
        line-height:0.7rem;
    }
    #header #header_menu_area #header_menu .logo_area {
        width:150px;
    }
    #header #header_menu_area #header_menu .logo_area .logo {
        display: block;
    }
    #header #header_menu_area #header_menu .menu_area .sns_area{
        display:none;
    }
    #header #header_menu_area #header_menu .menu_area nav {
        display:none;
    }
    #header #header_menu_area #header_menu .menu_area .contact_area .contact_btn a.btn{
        font-size:0.9rem;
        padding:0.3em 1.5em;
    }
    #header .hamburger_btn{
        display:block;
    }
    /*mainvisual*/
    .page-index #mainvisual .inner .title_area {
        width:100%;
    }
    .page-index #mainvisual .inner .title_area .inner p.title {
        font-size:2rem;
        line-height:3rem;
    }
    .page-index #mainvisual .inner .title_area .inner p.title span.text1 span.blue_text {
        font-size:3rem;
    }
    .page-index #mainvisual .inner .title_area .inner p.title span.text1 span.after_text {
        font-size:1.0rem;
    }
    .page-index #mainvisual .inner .title_area .inner p.title span.text2{
        font-size:1.5rem;
    }
    .page-index #mainvisual .inner .cost_area {
        width:100%;
        justify-content:center;
        left:50%;
        translate:-50% -100%;
    }
    .page-index #mainvisual .inner .cost_area .item{
        width:30%;
    }

    /*about*/
    .page-index #about .inner h2 {
        font-size:2.0rem;
    }
    .page-index #about .list .item {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
        "title"
        "image"
        "desc";
        row-gap: 16px;   /* 行間 */
    }
    /* 各要素をエリアに割当て（順序制御） */
    .page-index #about .inner .list .item h3 {
        grid-area: title;
        font-size:1.2rem;
        line-height:1.5rem;
        margin: 0;
        /* バッジ画像が大きいのでSPは少し詰める */
        padding: 0.3em 0 0.3em 60px;
        text-align: left;
    }
    .page-index #about .inner .list .item figure.img_area {
        grid-area: image;
        justify-self: center;   /* 画像を中央寄せ */
    }
    .page-index #about .inner .list .item p.text {
        grid-area: desc;
        margin: 0;
        padding-left: 0;        /* PC用の左パディングをリセット */
    }
    .page-index #about .inner .list .item h3:before{
        width:60px;
        height:60px;
    }
    /* 2つ目だけ左右反転のPC指定をSPでは無効化 */
    .page-index #about .list .item:nth-of-type(2) {
        grid-template-columns: 1fr; /* 1カラムに戻す */
    }
    .page-index #about .list .item:nth-of-type(2) .img_area {
        grid-column: auto;
        grid-row: auto;
        justify-self: center;
    }
    .page-index #about .list .item:nth-of-type(2) h3,
    .page-index #about .list .item:nth-of-type(2) p.text {
        grid-column: auto;
        grid-row: auto;
    }
    /*worries*/
    .page-index #worries .inner h2 {
        font-size:2.0rem;
        line-height:3rem;
    }
    .page-index #worries .inner h2 span.red {
        font-size:2.5rem;
    }
    .page-index #worries .inner ul.list {
        width:100%;
        padding:0.5em;
        margin: 150px auto 0 auto;
    }
    .page-index #worries .inner h2::before {
        width:150px;
        height:150px;
        top:100%;
        right:0;
        translate:0 0;
        z-index:2;
    }
    .page-index #worries .inner ul.list::after{
        width:150px;
        height:70px;
    }
    .page-index #worries .inner ul.list li {
        font-size:1rem;
        text-align:justify;
    }
    .page-index #worries .inner .under_area{
        font-size:1rem;
        padding:0.5em 1em;    
        margin: 150px auto 50px auto;  
    }
    .page-index #worries .inner .under_area::before{
        width:150px;
        height:150px;
        top:0;
        left:0;
        translate:0 -90%;
    }
    /*service*/
    .page-index #service .inner h2 {
        font-size:2.0rem;
    }
    .page-index #service .inner .list {
        flex-wrap:wrap;
    }
    .page-index #service .inner .list .item {
        width:45%;
        margin:0.5em;
    }
    /*flow*/
    .page-index #flow .inner h2 {
        font-size:2.0rem;
    }
    .page-index #flow .inner .list {
        flex-direction:column;
    }
    .page-index #flow .inner .list .item {
        width:100%;
        margin:0 0 50px 0;
    }
    /*price*/
    .page-index #price .inner h2 {
        font-size:2.0rem;
    }
    .page-index #price .inner p.comment{
        text-align:justify;
    }
    .page-index #price .inner .list {
        flex-direction:column;
    }
    .page-index #price .inner .list .item {
        width:100%;
        margin:0 0 50px 0;
    }
    .page-index #price .inner .list .item .content_area{
        padding:10px;
    }
    .page-index #price .inner .list .item .content_area .box .box_item{
        padding: 0.2em;
    }
    .page-index #price .inner p.supplement{
        text-align:left;
    }
    .page-index #price .inner p.supplement2{
        text-align:left;
    }
    /*production*/
    .page-index #production .inner .list {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr;
        gap: 20px;
    }
    /*Information*/
    .page-index #Information .inner {
        width:100%;
    }
    .page-index #Information .inner .row {
        grid-template-columns:1fr 2fr; 
    }
    /*footer*/
    #footer #footer_menu .inner .menu_area ul.list {
        flex-direction:column;
    }
    #footer #footer_menu .inner .menu_area ul.list li.list_item {
        width:100%;
    }
    #footer #footer_menu .inner .menu_area ul.list li.list_item {
        width:100%;
        margin-bottom:10px;
    }
    #footer #footer_menu .inner .menu_area ul.list li.list_item a.btn {
        width:100%;
    }
    #footer #footer_menu .inner .menu_area ul.list2 {
        flex-direction:column;
    }
    #footer #footer_menu .inner .menu_area ul.list2 li.list_item2{
        border:none;
        margin-bottom:10px;
    }
    #footer #footer_menu .inner .menu_area ul.list2 li.list_item2:last-child{
        border:none;
    }
    /*contact*/
    .page-contact #contact .inner .explanation{
        width:100%;
    }
    /*about.php*/
    .page-about #about .inner .img_box{
        flex-direction:column;
    }
    .page-about #about .inner .img_box .item{
        width:100%;
        margin:5% 0;
    }
    /*privacy*/
    .page-privacy #privacy .inner .text_area h3 {
        font-size:1.3rem;
        padding: 0.3em 0 0.3em 1em;
    }
    .page-privacy #privacy .inner .text_area ol {
        margin:0 0 0 2em;
    }
}
@media only screen and (max-width: 320px) {

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