@charset "utf-8";
/* PCファースト方式で記述。タブレット用モバイル用はメディアクエリで都度指定 */
* {
    margin:0;
    padding:0;
    box-sizing: border-box;
/*    outline: 2px solid red;*/
}

html { font-size: 62.5%;} /* font-sizeは16pxの62.5%の10px */
html,body {
/*  overflow-x: hidden;*/
}
body {
    font-family: "source-han-sans-vf",sans-serif;
    font-variation-settings: 'wght' 250;
    width: 100vw;
    height: 100vh;
    background-image: url(./img/bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    background-attachment: fixed;
    background-color: #ffffff;
    color: #442812;
    font-size: 1.4rem; /*font-size : 14px と同等*/
    overflow-x: clip;
}

h1 { font-size: 1.4rem; } /* font-size: 14px と同等 */
h2 { font-size: 1.5rem; } /* font-size: 15px と同等 */
li { font-size: 2.2rem; } /* font-size: 22px と同等 */
p  { font-size: 1.4rem; line-height:1.1 } /* font-size: 14px と同等 */
a:link{ color:#743d07;
        text-decoration: none; }
a:visited{ color:#442812;
        text-decoration: none; }
a:hover{ color:#a21017;
        text-decoration:underline; }
a:active{ color:#a21017;
        text-decoration: none; }
img {
    width: 100%;
    }
.txt-center{
    text-align: center;
}
.txt-right{
    text-align: right;
}
.bold{
    font-weight: bold;
}
.big{
    font-size:2.2rem;
}
.title-style{
    font-size:1.7rem;
}
.small{
    font-size:1.0rem;
}
@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */
    body {
    background-image: none;
    }
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
    html {
        font-size: 50%;
    }
}
img.icon {
/* ロゴマークサンカラー */
    width: auto;
    height: 3.5em;
    }
img.mark {
/* 太陽ロゴマーク */
    width: auto;
    height: 2em;
    }
/*基本フレームここから*/
.header-frame{
    display: block;
    width: 100%;
}
.contents-frame{
    display: flex;
    width: 100%;
}
.left-frame{
    display: flex;
    width: 60%;
}
.right-frame{
    display: block;
    width: 40%;
}
.footer-frame{
    display: block;
    width: 100%;
}
/*基本フレームここまで*/
@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */
    .left-frame{
    display: flex;
    width: 100%;
    }
    .right-frame{
    display: none;
    }
}

/*点滅させるここから*/
.element {
   animation: tikatika 1s step-end infinite;
}
@keyframes tikatika {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
/*点滅させるここまで*/

/*内容フレームここから*/
/*幅100％の外枠*/
.width100contents-tate{
    display: flex;
    flex-flow: column;
    width: 100%;
    align-items: center;
}
.width100contents-yoko{
    display: flex;
    flex-flow: row;
    width: 100%;
    margin: auto auto 0.5em auto;
}
/*幅90％の外枠*/
.width90contents-yoko{
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items:stretch;
    gap: 1em;
    margin: 0.5em auto 1em auto;
    width: 90%;
}
@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */
    .width90contents-yoko{
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    }
}
/*ロゴとh1が入るボックス*/
.header-box{
    display: flex;
    align-items: flex-end;
    margin: 0 1em 0 0;
}
/*スライダー枠*/
.slide-frame{
    display: flex;
    height: 300px;
    justify-content: center;
    margin: auto auto 1em auto;
}
/*img.top-slider-print{
    display: inline-block;
    width: 750px;
    height: 300px;
}
img.top-slider-IDphoto{
    display: inline-block;
    width: 750px;
    height: 300px;
}*/
.slide-img01{
    display: block;
    width: 750px;
    height: 300px;
    background-image: url(./img/top-slider-IDphoto.jpg);
    background-size:cover;
}
.slide-img02{
    background-position:center;
    display: block;
    width: 750px;
    height: 300px;
    background-image: url(./img/top-slider-print.jpg);
    background-size:cover;
    background-position:center;
}
/*スライダーここから*/
 /*=== 画像の表示エリア ================================= */
.slide {
  position   : relative;
  overflow   : hidden;
                    /* 画像のサイズに合わせて変更ください */
  width      : 750px;
  height     : 300px;
  margin     : auto;      /* サンプルは中央寄せの背景：白 */
}
 
 /*=== 画像の設定 ======================================= */
.slide img {
  display    : block;
  position   : absolute;
                      /* 画像のサイズを表示エリアに合せる */
  width      : inherit;
  height     : inherit;
  left       : 100%;
  animation  : slideAnime 12s ease infinite;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 6s }
 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { left: 100%  }
   8% { left: 0     }
  42% { left: 0     }
  50% { left: -100% }
 100% { left: -100% }
}
/*スライダーここまで*/
@media screen and (max-width: 749px){
    .slide-frame{
    display: flex;
    height: 200px;
    justify-content: center;
    }
/*    img.top-slider-print{
    width: 500px;
    height: 200px;
    }
    img.top-slider-IDphoto{
    width: 500px;
    height: 200px;
    }*/
    .slide-img01{
    display: block;
    width: 500px;
    height: 200px;
    background-image: url(./img/top-slider-IDphoto.jpg);
    background-size:cover;
    background-position:center;
    }
    .slide-img02{
    display: block;
    width: 500px;
    height: 200px;
    background-image: url(./img/top-slider-print.jpg);
    background-size:cover;
    background-position:center;
    }
/*スライダーここから*/
 /*=== 画像の表示エリア ================================= */
.slide {
  position   : relative;
  overflow   : hidden;
                    /* 画像のサイズに合わせて変更ください */
  width      : 500px;
  height     : 200px;
  margin     : auto;      /* サンプルは中央寄せの背景：白 */
}
 
 /*=== 画像の設定 ======================================= */
.slide img {
  display    : block;
  position   : absolute;
                      /* 画像のサイズを表示エリアに合せる */
  width      : inherit;
  height     : inherit;
  left       : 100%;
  animation  : slideAnime 12s ease infinite;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 6s }
 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { left: 100%  }
   8% { left: 0     }
  42% { left: 0     }
  50% { left: -100% }
 100% { left: -100% }
}
/*スライダーここまで*/
}
@media screen and (max-width: 499px){
    .slide-frame{
    display: flex;
    height: 142px;
    justify-content: center;
    }
/*    img.top-slider-print{
    width: 355px;
    height: 142px;
    }
    img.top-slider-IDphoto{
    width: 355px;
    height: 142px;
    }*/
    .slide-img01{
    display: block;
    width: 355px;
    height: 142px;
    background-image: url(./img/top-slider-IDphoto.jpg);
    background-size:cover;
    background-position:center;
    }
    .slide-img02{
    display: block;
    width: 355px;
    height: 142px;
    background-image: url(./img/top-slider-print.jpg);
    background-size:cover;
    background-position:center;
    }
/*スライダーここから*/
 /*=== 画像の表示エリア ================================= */
.slide {
  position   : relative;
  overflow   : hidden;
                    /* 画像のサイズに合わせて変更ください */
  width      : 355px;
  height     : 142px;
  margin     : auto;      /* サンプルは中央寄せの背景：白 */
}
 
 /*=== 画像の設定 ======================================= */
.slide img {
  display    : block;
  position   : absolute;
                      /* 画像のサイズを表示エリアに合せる */
  width      : inherit;
  height     : inherit;
  left       : 100%;
  animation  : slideAnime 12s ease infinite;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 6s }
 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { left: 100%  }
   8% { left: 0     }
  42% { left: 0     }
  50% { left: -100% }
 100% { left: -100% }
}
/*スライダーここまで*/
}
/*お知らせがある時のみ表示する*/
.news-frame{
    display: flex;
    width: 100%;
    height: 7.5em;
    justify-content: center;
    align-items: center;
}
/*第三木曜日枠*/
.thanksday-img-frame{
    display: flex;
    width: 100%;
    height: 3.5em;
    justify-content: center;
    align-items: center;
    background-color: red;
}
img.thanksdayimg {
/* 毎月第3木曜日は */
    width: auto;
    height: 3em;
    }
@media screen and (max-width: 750px){
    .thanksday-img-frame{
    display: flex;
    width: 100%;
    height: 1.8em;
    justify-content: center;
    align-items: center;
    }
    img.thanksdayimg {
    /* 毎月第3木曜日は */
    width: auto;
    height: 1.8em;
    }
}
.thanksday-txt-frame{
    display: flex;
    width: 100%;
    height: 12em;
    justify-content: center;
    align-items: center;
}
/*営業カレンダー*/
.business-calendar-img-frame{
    display: block;
    width: 20em;
    height: 20em;
    background-image: url(./img/business-calendar.jpg);
    background-size:cover;
    background-position:center;
}
.business-calendar-txt-frame{
    display: block;
    width: 90%;
    margin: 0.5em auto 0.5em auto;
}
/*ロゴとh2タグが入るボックス*/
.title-box{
    display: flex;
    align-items: flex-end;
    height: 4em;/*下揃えの上4em空きでコンテンツ間隔を調整*/
}
/*flex枠の中に並べて表示するコンテンツ*/
.contents-frame01{
    display: block;
    width: 15em;
    height: 15em;
    background-image: url(./img/button_print.jpg);
    background-size:cover;
    background-position:center;
    transition 0.3s;
}
.contents-frame02{
    display: block;
    width: 15em;
    height: 15em;
    background-image: url(./img/button_dubbing.jpg);
    background-size:cover;
    background-position:center;
    transition 0.3s;
}
.contents-frame03{
    display: block;
    width: 15em;
    height: 15em;
    background-image: url(./img/button_idphoto.jpg);
    background-size:cover;
    background-position:center;
    transition 0.3s;
}
.contents-frame04{
    display: block;
    width: 15em;
    height: 15em;
    background-image: url(./img/button_studio.jpg);
    background-size:cover;
    background-position:center;
    transition 0.3s;
}
.contents-frame05{
    display: block;
    width: 15em;
    height: 15em;
    background-image: url(./img/button_location.jpg);
    background-size:cover;
    background-position:center;
    transition 0.3s;
}
.contents-frame06{
    display: block;
    width: 15em;
    height: 15em;
    background-image: url(./img/button_iei.jpg);
    background-size:cover;
    background-position:center;
    transition 0.3s;
}
.contents-frame07{
    display: block;
    width: 15em;
    height: 15em;
    background-image: url(./img/button_corporation.jpg);
    background-size:cover;
    background-position:center;
    transition 0.3s;
}
.contents-frame01:hover{
  transform: scale(1.1);/*1.1倍に拡大します*/
}
.contents-frame02:hover{
  transform: scale(1.1);/*1.1倍に拡大します*/
}
.contents-frame03:hover{
  transform: scale(1.1);/*1.1倍に拡大します*/
}
.contents-frame04:hover{
  transform: scale(1.1);/*1.1倍に拡大します*/
}
.contents-frame05:hover{
  transform: scale(1.1);/*1.1倍に拡大します*/
}
.contents-frame06:hover{
  transform: scale(1.1);/*1.1倍に拡大します*/
}
.contents-frame07:hover{
  transform: scale(1.1);/*1.1倍に拡大します*/
}
/*内容フレームここまで*/

/*店舗情報*/
.shop-info-frame{
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
    margin: 0.5em auto 0.5em auto;
    width: 100%;
}
.shop-img-frame{
    display: block;
    width: 20em;
    height: 20em;
    background-image: url(./img/shop.jpg);
    background-size:cover;
    background-position:center;
}
.map-frame{
    display: block;
    width: 20em;
    height: 20em;
}
.shop-txt-frame{
    display: block;
    width: 20em;
}
.fb-img-frame{
    display: block;
    width: 3em;
    height: 3em;
    background-image: url(./img/facebook.png);
    background-size:cover;
    background-position:center;
}
.LINE-img-frame{
    display: block;
    width: 3em;
    height: 3em;
    background-image: url(./img/LINE.png);
    background-size:cover;
    background-position:center;
}
.insta-img-frame{
    display: block;
    width: 3em;
    height: 3em;
    background-image: url(./img/insta.png);
    background-size:cover;
    background-position:center;
}
iframe {
  width: 100%;
  aspect-ratio: 1/1; //アスペクト比（縦横比）を指定
}

/*プリントメニューのページ*/
.print-frame{
    display: flex;
    width:90%;
    margin: 0.5em auto 1em auto;
}
.print-txt-frame{
    display: flex;
    width:90%;
    margin: 0 auto 1em auto;/*上下余白の調整*/
}
.print-line-frame{
    display: block;
    width:90%;
    margin: 0 auto 1em auto;/*上下余白の調整*/
}
.hanatogirl-frame{
    display: flex;
    flex-flow: row;
    flex-wrap: wrap-reverse;
    width:90%;
    margin: 0.5em auto 1em auto;
}
.return-menu{
    display: block;
    width:90%;
    margin: 1em auto 1em auto;
    text-align: right;
}
.ieikakou-frame{
    display: flex;
    flex-flow: row;
    flex-wrap: wrap-reverse;
    width:90%;
    margin: 0.5em auto 1em auto;
}
.table-print{
    margin: auto;
    width:100%;
    border: 1px solid #442812;
    border-collapse: collapse;
}
@media screen and (max-width: 959px) {
    /* 959px以下に適用されるCSS（タブレット用） */
    .table-print{
    margin: auto;
    width:100%;
    border: 1px solid #442812;
    border-collapse: collapse;
    }
}
.table-print th{
    padding: 0.5em;
    background: #d6c1c1;
    border: 1px solid #442812;
}
.td-print{
    padding: 0.5em;
    border: 1px solid #442812;
}
.td-dubbing-koumoku{
    padding: 0.5em;
    background: #d6c1c1;
    border-bottom: 1px solid #442812;
}
.td-dubbing-kakaku{
    padding: 0.2em;
    border-bottom: 1px solid #442812;
}
.td-idphoto{
    padding: 0.5em;
    border: 1px solid #442812;
    width:17em;
}
.td-konkatsu{
    padding: 0.5em;
    border: 1px solid #442812;
    width:18em;
}
.hanatogirl-img-frame{
/* 花と少女写真 */
    display: block;
    width: 10.1392em;
    height: 9em;
    background-image: url(./img/hanatogirl.png);
    background-size:cover;
    background-position:center;
}
img.thanksdayimg-printpage{
    width: 100%;
}
.ieikakou-img-frame{
/* 遺影加工、加工前加工後 */
    display: block;
    width: 25.666em;
    height: 11em;
    background-image: url(./img/ieikakou.jpg);
    background-size:cover;
    background-position:center;
}
.syuhuku-img-frame{
/* 肖像加工、加工前加工後 */
    display: block;
    width: 16.5em;
    height: 11em;
    background-image: url(./img/syuhuku.jpg);
    background-size:cover;
    background-position:center;
}
.txt-img-30em{
    display:flex;
    align-items: center;
    width:30em;
}
.txt-inlineblok{
/*文字の一部だけを太く大きくするためのインライン要素*/
    display:inline-block;
    width:30em;
}

/*撮影メニューページ*/
.txt-img-80per{
    display:flex;
    align-items: center;
    width:80%;
}
.idphoto-outline-frame{
    display: flex;
    flex-flow: row;
    flex-wrap: wrap-reverse;
    width:90%;
    margin: 0.5em auto 1em auto;
}
.idphoto-img-frame{
/* 証明写真 */
    display: block;
    width: 11em;
    height: 14.4686em;
    background-image: url(./img/idphoto.jpg);
    background-size:cover;
    background-position: top center;
    margin: auto auto auto 1em;
}
.studios-img-frame{
/* スタジオ撮影 */
    display: block;
    width: 14.36111em;
    height: 11em;
    background-image: url(./img/studios.jpg);
    background-size:cover;
    background-position:center;
    margin: auto auto auto 1em;
}
.konkatsu-img-frame{
/* 婚活写真 */
    display: block;
    width: 12em;
    height: 16.021em;
    background-image: url(./img/konkatu.jpg);
    background-size:cover;
    background-position:center;
    margin: auto auto auto 1em;
}
.iei_satuei-img-frame{
/* 生前遺影撮影 */
    display: block;
    width: 12.98em;
    height: 11em;
    background-image: url(./img/iei_satuei.jpg);
    background-size:cover;
    background-position:center;
}
.undoukai-img-frame{
/* 出張撮影 */
    display: block;
    width: 12em;
    height: 12em;
    background-image: url(./img/undoukai.jpg);
    background-size:cover;
    background-position:center;
    margin: auto auto auto 1em;
}
.undoukai-outline-frame{
    display: flex;
    flex-flow: row;
    flex-wrap: wrap-reverse;
    width:90%;
    margin: 0.5em auto 1em auto;
}
.undoukai2-img-frame{
/* 学校関係者様向けサービス */
    display: block;
    width: 9.991em;
    height: 12em;
    background-image: url(./img/undoukai2.jpg);
    background-size:cover;
    background-position:center;
    margin: auto auto auto 1em;
}
.txt-satsuei{
/*文字の一部だけを太く大きくするためのインライン要素*/
    display:inline-block;
    width:30em;
}
.img-taisyou{
/*ダビング対応メディア*/
    display:block;
    width:30em;
    height:24.3089em;
    background-image: url(./img/taisyou.jpg);
    background-size:cover;
    background-position:center;
    margin: auto;
}
@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */
.img-taisyou{
/*ダビング対応メディア*/
    display:block;
    width:15em;
    height:12.1544em;
    background-image: url(./img/taisyou.jpg);
    background-size:cover;
    background-position:center;
    margin: auto;
}
}
.ico_plus{
    display:block;
    width:1em;
    height:1em;
    background-image: url(./img/ico_plus.png);
    background-size:cover;
    background-position:center;
    margin: auto;
}
.ico_equal{
    display:block;
    width:1em;
    height:1em;
    background-image: url(./img/ico_equal.png);
    background-size:cover;
    background-position:center;
    margin: auto;
}
.empty{
    display:block;
    width:1em;
    height:1em;
    margin: auto;
}