@charset "UTF-8";

/* -------------------------------
sanitize.css
------------------------------- */

/* Document
 * ========================================================================== */

/**
 * Add border box sizing in all browsers (opinionated).
 */

*,
::before,
::after {
  box-sizing: border-box;
}

/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritance in all browsers (opinionated).
 */

::before,
::after {
  text-decoration: inherit; /* 1 */
  vertical-align: inherit; /* 2 */
}

/**
 * 1. Use the default cursor in all browsers (opinionated).
 * 2. Change the line height in all browsers (opinionated).
 * 3. Use a 4-space tab width in all browsers (opinionated).
 * 4. Remove the grey highlight on links in iOS (opinionated).
 * 5. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 * 6. Breaks words to prevent overflow in all browsers (opinionated).
 */

html {
  cursor: default; /* 1 */
  line-height: 1.5; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  -webkit-tap-highlight-color: transparent /* 4 */;
  -ms-text-size-adjust: 100%; /* 5 */
  -webkit-text-size-adjust: 100%; /* 5 */
  word-break: break-word; /* 6 */
}

/* Sections
 * ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/* Grouping content
 * ========================================================================== */


/**
 * Add the correct display in IE.
 */

main {
  display: block;
}

/* Text-level semantics
 * ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

/* Embedded content
 * ========================================================================== */

/*
 * Change the alignment on media elements in all browsers (opinionated).
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/**
 * Remove the border on images within links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */

svg:not([fill]) {
  fill: currentColor;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}


/* User interaction
 * ========================================================================== */

/*
 * 1. Remove the tapping delay in IE 10.
 * 2. Remove the tapping delay on clickable elements
      in all browsers (opinionated).
 */

a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
  -ms-touch-action: manipulation; /* 1 */
  touch-action: manipulation; /* 2 */
}

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}

/* Accessibility
 * ========================================================================== */

/**
 * Change the cursor on busy elements in all browsers (opinionated).
 */

[aria-busy="true"] {
  cursor: progress;
}

/*
 * Change the cursor on control elements in all browsers (opinionated).
 */

[aria-controls] {
  cursor: pointer;
}

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers (opinionated).
 */

[aria-disabled="true"],
[disabled] {
  cursor: not-allowed;
}

/*
 * Change the display on visually hidden accessible elements
 * in all browsers (opinionated).
 */

[aria-hidden="false"][hidden] {
  display: initial;
}

[aria-hidden="false"][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

/* -------------------------------
common.css
------------------------------- */

/* 画面幅別の表示・非表示 */
.only-m {
    display: none;
    margin: 0;
}

@media screen and (max-width: 767px) {
    .only-pc {
        display: none;
    }

    .only-m {
        display: block;
    }
}

/* -------------------------------
ページトップリンク
-ページの指定の高さを超えたら下から出現-
------------------------------- */

#page-top img {
    width: 60px;
}

#page-top a:hover img {
    opacity: 0.8;
}


/*リンクを右下に固定*/
#page-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2;
    /*はじめは非表示*/
    opacity: 0;
    transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove,
#fix_menu_smartphone.UpMove {
    animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*　下に下がる動き　*/

#page-top.DownMove,
#fix_menu_smartphone.DownMove {
    animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 1;
        transform: translateY(100px);
    }
}



/* -------------------------------
SF型
------------------------------- */

/* CSS Document */
:root {
    --preset--color--main: #ed6d4e;
    --preset--color--accent: #e8c800;
    --preset--color--accent-2: #a4742a;
    --preset--color--base: #ffffff;
    --preset--color--base-2: #ebeac3;
    --preset--color--contrast: #000000;
    --preset--color--contrast-2: #373333;
    --preset--color--gray: #cccccc;
    --preset--color--sumi-200: #E8E8EB;
    --preset--color--sumi-50: #F8F8FB;
    --preset--color--link: #3399ff;
    --preset--color--link-hover: #ff6600;
    --preset--color--line: #06c755;

    --preset--spacing--10: 10px;
    --preset--spacing--20: clamp(1rem, 0.8555rem + 0.6163vw, 1.25rem);
    --preset--spacing--30: clamp(1.25rem, 0.8889rem + 1.5408vw, 1.875rem);
    --preset--spacing--50: clamp(1.875rem, 1.1527rem + 3.0817vw, 3.125rem);
    --preset--spacing--70: clamp(3.125rem, 2.4027rem + 3.0817vw, 4.375rem);
    --preset--spacing--100: clamp(4.375rem, 3.2916rem + 4.6225vw, 6.25rem);

    --preset--font-size--body: clamp(0.875rem, 0.8021rem + 0.3333vw, 1rem);
    /* 16-14px */
    --preset--font-size--h2: clamp(2rem, 1.3438rem + 3vw, 3.125rem);
    /* 50-32px */
    --preset--font-size--h3: clamp(1.5rem, 1.1739rem + 1.3913vw, 2rem);
    /* 32-24px */
    --preset--font-size--h4: clamp(1.375rem, 1.1304rem + 1.0435vw, 1.75rem);
    /* 28-22px */
    --preset--font-size--h5: clamp(1.125rem, 0.962rem + 0.6957vw, 1.375rem);
    /* 22-18px */
}

/* -------------------------------
基本設定
------------------------------- */

html {
    scroll-behavior: smooth;
}

/* body全体の初期スタイル */
body {
    font-family: "Noto Sans JP", sans-serif;
    font-size: var(--preset--font-size--body);
    font-weight: 400;
    background-color: var(--preset--color--sumi-200);
    margin: 0;
}

img {
    display: block;
    /* imgの下に余計な空白が入るのを防ぐ */
    width: 100%;
}

/* リンク文字の設定 */
a {
    text-decoration: none;
}

.smalltext {
    font-size: 0.8rem;
}

/* -------------------------------
見出しタグ設定
------------------------------- */

h1,
h2,
h3,
h4,
h5 {
    font-weight: 700;
    line-height: 1.5;
    min-height: 0vw;
    /* clampをSafariで機能させるため */
}

h2 {
    font-size: var(--preset--font-size--h2);
    margin-bottom: var(--preset--spacing--50);
    margin-top: var(--preset--spacing--70);
    text-align: center;
}

h3 {
    font-size: var(--preset--font-size--h3);
    margin-bottom: var(--preset--spacing--30);
    margin-top: var(--preset--spacing--50);
}

h4 {
    font-size: var(--preset--font-size--h4);
    margin-bottom: var(--preset--spacing--20);
    margin-top: var(--preset--spacing--30);
}

h5 {
    font-size: var(--preset--font-size--h5);
    margin-bottom: var(--preset--spacing--20);
    margin-top: var(--preset--spacing--30);
}

/* -------------------------------
全体レイアウト／背景設定
------------------------------- */

/* 記事（ボディ）エリア */
article {
    background-color: var(--preset--color--base);
    /* 左右のみ影 */
    box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.3), 
             5px 0 5px -5px rgba(0, 0, 0, 0.3); 

}

article p {
    line-height: 1.7;
}

article p:first-of-type {
    margin-top: 0;
}

/* 全体の幅を設定する */
article,
.header_inr,
.top_image_in,
.footer_inr {
    margin: 0 auto;
    width: 700px;
}
@media screen and (max-width: 699px) {
    article,
    .header_inr,
    .top_image_in,
    .footer_inr {
        width: 100%;
    }
}
@media screen and (max-width: 710px) {
    .header_inr {
        padding: 0 0 0 var(--preset--spacing--20);
    }    
}

section {
    padding: var(--preset--spacing--50) var(--preset--spacing--20);
}

section h2:first-of-type {
    margin-top: 0;
}

/* ボタン */
.wrap_btn a:hover {
    opacity: 0.9;
}

/* 強調テキスト */
.emphasize_phrase {
    background-image: linear-gradient(rgba(0 0 0 / 0) 70%,
            var(--preset--color--main) 70%);
    font-weight: 700;
}

/* -------------------------------
上部固定ヘッダー設定
------------------------------- */

/* 上部固定ヘッダー全体 */
header {
    height: clamp(46px, 12vw, 80px);
    background-color: var(--preset--color--base);
    border-bottom: 1px solid var(--preset--color--gray);
    z-index: 2000;
}

@media screen and (min-width: 768px) {
    header {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        z-index: 5000;
    }
}

/* ヘッダー内部 */
.header_inr {
    align-items: center;
    display: flex;
    gap: 10px;
    height: 100%;
}

.header_inr img {
    width: 100%;
}

.header_company {
    align-items: center;
    display: flex;
    gap: 20px;
    margin-right: auto;
}
@media screen and (max-width: 767px) {
    .header_company {
        gap: 10px;
    }
}

.header_logo {
    max-width: 144px;
}

.header_address {
    max-width: 193px;
}

.header_btns .wrap_btn {
    height: 100%;
    max-width: 250px;
}

/* -------------------------------
section別設定
------------------------------- */

/* CTA */

.area_cta {
    background-color: var(--preset--color--main);
    padding: var(--preset--spacing--30);
}

.area_cta .section_inr {
    background-image: url(images/cta_bg.png);
    padding-top: var(--preset--spacing--30);
}

.cta_microcopy {
    margin: 0 auto;
    max-width: 591px;
    padding: 0 var(--preset--spacing--20);
}

.cta_btns {
    padding: var(--preset--spacing--20);
}

.cta_btns .wrap_btn {
    margin: 0 auto;
    max-width: 635px;
}

.cta_ill {
    margin-right: -10px;
    max-width: 648px;
    padding-left: var(--preset--spacing--20);
}

/* 撮影案件の例 */
.sec_sample {
    padding: var(--preset--spacing--50) 0 0;
}

/* こんな魅力が */
.sec_merit {
    padding: 0;
}

/* 実際の撮影の様子 */
.sec_recording {
    padding: var(--preset--spacing--50) 0 0;
}

/* こんな人にオススメ */
.sec_osusume {
    background-color: var(--preset--color--base-2);
    padding: var(--preset--spacing--50) 0 0;
}

/* 口コミ */
.sec_voice {
    padding: var(--preset--spacing--50) 0;
}

/* 流れ */
.sec_flow {
    background-color: var(--preset--color--base-2);
    padding: var(--preset--spacing--50) 0;
}

/*--------------------------------------------------
スマホ用下部固定フッター（PCは非表示）
アニメーションの指定は「上へ戻るボタン」と一緒にcommon.cssに
-----------------------------------------------------*/

#fix_menu_smartphone {
    display: none;
}

@media screen and (max-width: 767px) {
    #fix_menu_smartphone {
        align-items: center;
        background-color: var(--preset--color--line);
        bottom: 0px;
        box-shadow: 0px 0px 3px #594a42;
        display: flex;
        left: 0px;
        position: fixed;
        width: 100%;
        z-index: 10000;
        /*はじめは非表示*/
        opacity: 0;
        transform: translateY(100px);
    }

    #fix_menu_smartphone a {
        padding: 1em;
        margin: 0 auto;
    }

    #fix_menu_smartphone img {
        max-width: 300px;
    }


    /* footer下スペース広げる */
    footer {
        margin-bottom: 4em;
    }
}

/* -------------------------------
フッター部分
------------------------------- */

.footer_inr {
    background-color: var(--preset--color--main);
        /* 左右のみ影 */
    box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.3), 
             5px 0 5px -5px rgba(0, 0, 0, 0.3); 
    color: var(--preset--color--base);
    padding: var(--preset--spacing--20) 0;
    text-align: center;
}

footer a {
    color: var(--preset--color--base);
}