@charset "UTF-8";

/* テキストの自動拡大を無効化 */
body {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    overflow-x: hidden;
}

/* 基本設置 */

* {
    margin: 0;
    padding: 0;
}



img {
    max-width:  100%;
    height: auto;
}

/* ページ全体の設定 */

body {
    display: grid;
    font-family: sans-serif;
    grid-template-columns: 20px 1fr 20px;
    grid-template-rows: 
        [head] 0px
        [title] auto
        [sub1] auto
        [main-d] auto
        [foot] 150px;
    grid-row-gap: 0px; /*行の余白　古いプロパティ用*/
    row-gap: 0px;　/*行の余白　新プロパティ用*/
}

/* パーツの配置 */

body > * {
    grid-column: 2 / -2;
}



/* ヘッダー */
header {
    grid-row: head;
    justify-self: center; /*横方向の位置揃え*/
    align-self: center; /*縦方向の位置揃え*/
    font-size: 24px;
    color: #ffffff;
    font-family: 'Raleway',sans-serif;
    position: fixed;
    right:0%;
    top:18px;
    z-index: 200;
    letter-spacing: 0.05em;
    /*width: 100%;*/
}

header a {
    color: inherit;
    text-decoration: none;
}

header a:hover {
    color: rgb(232, 248, 248);
}


/*
header::before {
    display: block;
    float: left;
    margin: -5px 15px 0 0;  
    content: url('../img/logo.png');
}
*/

/* ヘッダー上部（固定）ロゴ、ホームメニュー部の装飾　*/
.header-deco {
    grid-column: 1 / -1;
    position: fixed;
    width: 100%;
    transition: .3s;
    background-color: #57c4d3;
    height: 66px;
    z-index: 100;
}

/* ヘッダーナビゲーションメニュー */
.head-nav {
    justify-self: center; /*横方向の位置揃え*/
    align-self: end; /*縦方向の位置揃え*/
    position: fixed;
    right:3%;
    top:20px;
    z-index: 200;
}

.head-nav ul {        
    list-style-type: none;
    padding: 0;
    display: grid;
    grid-auto-flow: column;/*グリッドを横並びにする*/
    grid-column-gap: 10px; /*列の余白　古いプロパティ用*/
    column-gap: 10px;　/*列の余白　新プロパティ用*/
}

.head-nav a {
    color: #ffffff;
    text-decoration: none;
    font-family: 'Raleway',sans-serif;
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
}

.head-nav a:hover::after {
    width: 100%;
}
.head-nav a::after {
    content: '';
    display: block;
    width: 0;
    margin: 0 auto 0;
    border-bottom: 1px solid #ffffff;
    transition: width 0.3s ease-in-out;
}

/* ナビゲーションメニュー 「フット部に固定」*/
nav {
    grid-row: head;
}

nav ul {        
    list-style-type: none;
    padding: 0;
    margin-top:0px;
    margin-right: 18px;
    display: grid;
    grid-column-gap: 10px; /*列の余白　古いプロパティ用*/
    column-gap: 10px;　/*列の余白　新プロパティ用*/
}

nav li {
    margin:10px;
}

nav a {
    color: #018be7;
    text-decoration: none;
    font-family: 'Raleway',sans-serif;
    font-size: 12px;
    font-weight: bold;
    display: inline-blok;
}

nav a:hover {
    color: #03cef1;
}

nav a:hover::after {
    width: 100%;
}
nav a::after {
    content: '';
    display: block;
    width: 0;
    margin: 0 auto 0;
    border-bottom: 1px solid #63adca;
    transition: width 0.3s ease-in-out;
}

/*
html {
    scroll-behavior: smooth;
  }
*/

/* ヒーローイメージ */
figure.hero {
    grid-column: 1 / -1;
    grid-row: title / span 2;
}

figure.hero img {
    height: 547px;
    object-fit: cover; /* 画像の切り出し 高さに合わせ横幅を100%で切り出す */
    vertical-align: bottom; /*画像の下に入る余白を削除*/
    filter: brightness(80%); /*フィルタを使い画像の明るさを調整*/
    z-index: -1; /* 重なり順を変える-一つ下へ */
    position: relative; /* z-index非対応のEdge用の設定 */
}

figure.hero-top {
    grid-column: 1 / -1;
    grid-row: title / span 2;
}

figure.hero-top img {
    height: 700px;
    object-fit: cover; /* 画像の切り出し 高さに合わせ横幅を100%で切り出す */
    vertical-align: bottom; /*画像の下に入る余白を削除*/
    filter: brightness(70%); /*フィルタを使い画像の明るさを調整*/
    z-index: -1; /* 重なり順を変える-一つ下へ */
    position: relative; /* z-index非対応のEdge用の設定 */
}

figure.hero-page {
    grid-column: 1 / -1;
    grid-row: title / span 2;
}

figure.hero-page img {
    height: 500px;
    object-fit: cover; /* 画像の切り出し 高さに合わせ横幅を100%で切り出す */
    vertical-align: bottom; /*画像の下に入る余白を削除*/
    filter: brightness(60%); /*フィルタを使い画像の明るさを調整*/
    z-index: -1; /* 重なり順を変える-一つ下へ */
    position: relative; /* z-index非対応のEdge用の設定 */
}

figure.hero-page2 {
    grid-column: 1 / -1;
    grid-row: title / span 2;
}

figure.hero-page2 img {
    height: 3px;
    object-fit: cover; /* 画像の切り出し 高さに合わせ横幅を100%で切り出す */
    vertical-align: bottom; /*画像の下に入る余白を削除*/
    filter: brightness(60%); /*フィルタを使い画像の明るさを調整*/
    z-index: -1; /* 重なり順を変える-一つ下へ */
    position: relative; /* z-index非対応のEdge用の設定 */
}


/* タイトル */
.top h1 {
    grid-row: title;
    justify-self: center; /*横方向の位置揃え*/
    align-self: center; /*縦方向の位置揃え*/
    color: #ffffff;
    font-size: 6vw;
    font-weight: normal;
    line-height: 1.5; /*行の間隔設定(defalt 1.5)*/
    text-shadow: 0 0 5px #444444; /* 文字に影をつける */
    text-align: center;
    /*font-family: 'Raleway',sans-serif;*/
    /*font-family: 'Petit Formal Script', cursive;*/
    font-family: 'Julius Sans One', sans-serif;
    letter-spacing: 0.2em;
}

/* サブタイトル */
.top p {
    grid-row: sub1;
    text-align: center;
    align-self: center;
    /*color: #d2ebf8;*/
}

.top p a {
    color: #ffffff;
    text-decoration: none;
    border: solid 1px #ffffff;
    padding: 10px 40px;
    display: inline-block; /* 通常padding,margin,borderはインラインボックスとなり画像がつくるボックスとの位置関係に影響を与えないため、影響を与えるように設定 */
    margin-top: 10px;
    border-radius: 10px; /* 角丸にする */
    background-color: #306794;
}
.top p a:hover {
    background-color: #ef9504;
}

.sub-p {
    letter-spacing: 0.2em;
    color: #d2ebf8;
    /*width: 536px;*/
}

.sub-p img {
    margin:10px 0;
    width: 60px;
}

/* アニメーション 右から左スライド-フェードイン */
.sub-h1 {
    animation-duration: 4s;/* アニメーション時間 */
    animation-name: RightToLeft;/* アニメーション名 */
}

@keyframes RightToLeft {
    0% {
      opacity: 0;/* 透明 */
      transform: translateX(300px);/* X軸方向に300px */
    }
    100% {
      opacity: 1;/* 不透明 */
      transform: translateX(0);
    }
  }
  
  /* アニメーション 左から右スライド-フェードイン */
  .sub-p {
    animation-duration: 4s;/* アニメーション時間 */
    animation-name: LeftToRight;/* アニメーション名 */
}

@keyframes LeftToRight {
    0% {
      opacity: 0;/* 透明 */
      transform: translateX(-300px);/* X軸方向に300px */
    }
    100% {
      opacity: 1;/* 不透明 */
      transform: translateX(0);
    }
  }



/* メイン　*/
.main-waku {
grid-row: main-d;
grid-column: 1 / -1;
grid-template-columns: 1fr;
}

/* コンセプト */
.concept {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 50px 20px; /* gapの古いプロパティ用 */
    gap: 50px 20px;
    margin: 120px 20px;
}

.concept a {
    color: #333333;
    text-decoration: none;
}

.concept p {
    margin: 2% 5%;
    color: #504d4b;
    font-size: 18px;
    line-height: 260%;
    letter-spacing: 0.5em;
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
/*
font-family: 'Alex Brush', cursive;
font-family: 'Julius Sans One', sans-serif;
font-family: 'M PLUS 1p', sans-serif;
font-family: 'Noto Serif JP', serif;
font-family: 'Petit Formal Script', cursive;
font-family: 'Raleway', sans-serif;
font-family: 'Sail', cursive;    */
    text-shadow: 0 0 1px #acb8d3;
}

.concept a:hover {
    text-decoration: underline;
}

.concept h3 {
    font-size: 24px;
    color: #f1b400;
    text-align: center;
    font-weight: normal;
    margin: 60px 10px 30px 10px;
    letter-spacing: 0.3em;
    line-height: 200%;
    font-family: 'Raleway',sans-serif;
}

.concept h3::before {
    position: relative;
    top: 15px;
    margin: 0 15px 0 0;  
    /*content: url('../ch6ni9-HTML/img/partner100.png');*/
  }

.concept h2 {
    grid-column: 1 / -1;
    font-family: 'Sail', cursive;
    font-size: 30px;
    font-weight: normal;
    text-align: center;
    color: #5d8fb8;
    letter-spacing: 0.5em;
}

.concept-waku {
    margin:7% 0 1%;
}

p.concept-text {
    font-weight: bold;
    font-size: 28px;
}

/*
.concept {
    content: "";
    grid-column: 1 / -1;
    grid-row:main-d;
    z-index: -2;
}
*/


/* フォト（ワイド） */
.w-photo {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 50px 20px; /* gapの古いプロパティ用 */
    gap: 50px 20px;
    position: relative;
    margin: 0;
    padding: 0;
}

.w-photo a {
    color: #333333;
    text-decoration: none;
}

.w-photo p {
    position: absolute;
    color: #f3ece5;
    font-size: 2.0vw;
    line-height: 260%;
    letter-spacing: 0.3em;
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
    text-shadow: 0 0 1px #d1cfcf;
    margin:0;
    padding:24% 0 0 4%;
    text-align: left;
}

.w-photo a:hover {
    text-decoration: underline;
}


.w-photo h2 {
    grid-column: 1 / -1;
    font-family: 'Raleway',sans-serif;
    font-size: 30px;
    font-weight: normal;
    text-align: center;
    color: #5d8fb8;
    letter-spacing: 0.5em;
}

.w-photo-waku {
    margin:0;
    padding-top: 0px;
}

.w-photo-text {
    margin: 5% 2%;
}

/*
.w-photo {
    content: "";
    grid-column: 1 / -1;
    grid-row:main-d;
    z-index: -2;
}
*/

.w-photo img {
    height: 100%;
    object-fit: cover; /* 画像の切り出し 高さに合わせ横幅を100%で切り出す */
    vertical-align: bottom; /*画像の下に入る余白を削除*/
    /*filter: brightness(70%);*/ /*フィルタを使い画像の明るさを調整*/
    /*z-index: -1; *//* 重なり順を変える-一つ下へ */
    /*position: relative;*/ /* z-index非対応のEdge用の設定 */
}

/* MENU 料金 */
.price {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px 10px; /* gapの古いプロパティ用 */
    gap: 20px 10px;
    color: #272626;
    margin: 50px 0;
    padding: 3px;

}

.price a {
    color: #ffffff;
    text-decoration: none;
}

.price a img:hover {
    text-decoration: underline;
    box-shadow: 0 0 6px -1px rgba(0, 0, 0, 0.3);
    opacity: 0.8;
}
/*
.price h3 {
    font-size: 24px;
    padding: 5px 0;
    padding-left: 20px;
    color: #3d3c3c;
    position: relative;
    font-weight: normal;*/
    /*グラデーション装飾バー*/
    /*
	padding: 20px 20px 20px 38px;
	font-size:20px;
	border: 1px solid #D8D8D8;
	border-top: 2px solid #325A8C;
	background: linear-gradient(#ffffff 0%, #EFEFEF 100%);
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
}*/

.price h2 {
    grid-column: 1 / -1;
    font-family: 'Raleway',sans-serif;
    font-size: 24px;
    font-weight: normal;
    text-align: center;
    color: #e9ebe6;
}

.price p {
	padding: 1.0em 0 0.2em 1em;
    line-height: 1.5;
    text-align: left;
}
.price ul {
    position: relative;
	padding: 0.5em;
    list-style-type: none;
}

.price li {
	padding: 0.5em 0 0.5em 1em;
    line-height: 1.5;
    position: relative;

}

.price ul li::after {
    display: block;
    content: '';
    position: absolute;
    top: 1em;
    left: 0em;
    width: 5px;
    height: 5px;
    background-color: #fff;
    border: 1px solid #3498db;
    border-radius: 100%;
}

.price dl {
    display: grid;
    grid-template-columns: 1fr 30%;
    /*
    border-top: 1px solid #d8dddf;
    */
}

/* 装飾CSS プランコピー */
.price dt {
    color: #e2dddd;
    font-size: 16px;
    padding: 10px 20px;
    /*
    border-bottom: 1px solid #d8dddf;
    border-left: 1px solid #d8dddf;
    */
}

.price dd {
    /*background-color: #f5ebf3;*/
    line-height: 1.5;
    padding: 10px 20px;
    color: #fde979;
    /*
    border-right: 1px solid #d8dddf;
    border-bottom: 1px solid #d8dddf;
    border-left: 1px solid #d8dddf;
    */
    text-align: right
}

.price li::before {
    position: absolute;
}
.price-subcopy {
    margin: 0;
}




/* スクロールに応じてアニメーションさせる */

/* ずらした状態 */
.fadein {
	opacity : 0.1;
	transform : translate(0, 100px);
	transition : all 500ms;
    }
    
/* 画面内に入った状態 */
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}

#effect2 .fadein:nth-of-type(2) {
	-moz-transition-delay:200ms;
	-webkit-transition-delay:200ms;
	-o-transition-delay:200ms;
	-ms-transition-delay:200ms;
	}
#effect2 .fadein:nth-of-type(3) {
	-moz-transition-delay:400ms;
	-webkit-transition-delay:400ms;
	-o-transition-delay:400ms;
	-ms-transition-delay:400ms;
	}
    
    #animation {
        margin: 0;
        }

    .fadeInDown {
        -webkit-animation-fill-mode:both;
        -ms-animation-fill-mode:both;
        animation-fill-mode:both;
        -webkit-animation-duration:1s;
        -ms-animation-duration:1s;
        animation-duration:1s;
        -webkit-animation-name: fadeInDown;
        animation-name: fadeInDown;
        visibility: visible !important;
       }
       @-webkit-keyframes fadeInDown {
        0% { opacity: 0; -webkit-transform: translateY(-20px); }
        100% { opacity: 1; -webkit-transform: translateY(0); }
       }
       @keyframes fadeInDown {
        0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
        100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
       }



/* 商品リスト */
.shopping {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px 10px; /* gapの古いプロパティ用 */
    gap: 20px 10px;
    color: #ffffff;
    margin: 100px 0;
    padding-top: 50px;
    padding-bottom: 50px;
}

.shopping a {
    color: #424242;
    text-decoration: none;
}

.shopping a img:hover {
    text-decoration: underline;
    box-shadow: 0 0 6px -1px rgba(0, 0, 0, 0.3);
    opacity: 0.8;
}

.shopping h3 {
    font-size: 24px;
    text-align: center;
    color: #027b8e;
    padding: 15px 0px;
}
.shopping p {
    font-size: 20px;
    padding:5px 10px 5px 0px;
    color: #554c4c;
    text-align: center;
    line-height: 1.6em;
}
.shopping h2 {
    grid-column: 1 / -1;
    font-size: 20px;
    padding-top: 20px;
    font-weight: normal;
    text-align: center;
    color: #ffffff;
}

.shopping-waku {
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap:10px; /* 古いプロパティ */
    column-gap: 10px;
    background-color: #ffffff;
    border-top-left-radius: 50px 50px;
    border-top-right-radius: 50px 50px;
    border-bottom-right-radius: 50px 50px;
    border-bottom-left-radius: 50px 50px;
    padding: 20px;
    margin: 0px 20px 40px;
    text-align: center;
    color: #554c4c;
}

.shopping-waku ul {
    text-align: left;
    padding: 20px 20px;
    color: #554c4c;
}


.plice {
    color: #bf0411;
    font-size: 26px;
}

.shopping {
    content: "";
    background-color: #96d3eb;
    grid-column: 1 / -1;
}





/* お問い合わせバナー */
.web-contact {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px 10px; /* gapの古いプロパティ用 */
    gap: 20px 10px;
    color: #ffffff;
    margin: 100px 0;
    text-align: center;
}

.web-contact a {
    color: #424242;
    text-decoration: none;
}

.web-contact a img:hover {
    text-decoration: underline;
    box-shadow: 0 0 6px -1px rgba(0, 0, 0, 0.3);
    opacity: 0.8;
}

.web-contact h3 {
    font-size: 24px;
}
.web-contact p {
    font-size: 18px;
    padding: 20px 10px;
    margin: 0 30px;
    color: #b4034d;
}
.web-contact h2 {
    grid-column: 1 / -1;
    font-family: 'Raleway',sans-serif;
    font-size: 22px;
    padding-top: 30px;
    margin: 0 30px;
    font-weight: bolder;
    text-align: center;
    color: #444444;
    letter-spacing: 0.1em;
    line-height: 150%;
}

.web-contact-waku {
    background-color: #ffffff;
    border-top-left-radius: 20px 20px;
    border-top-right-radius: 20px 20px;
    border-bottom-right-radius: 20px 20px;
    border-bottom-left-radius: 20px 20px;
    padding: 0px;
    margin: 50px 2%;
    text-align: center;
    /*color: #e7dfdf;*/
    /*background-color: #fae1bd;*/
    /*background-image: url(../ch6ni9-HTML/img/ch6ni9-hr7.jpg);*/
    width:96%;
}

/* 装飾CSS 詳細ボタン */

.web-contact .web-contact-btn p a {
    text-decoration: none;
    padding: 30px 20px;
    margin-bottom: 20px;
    font-size: 18px;
    background-color: #fa4d08f3;
    letter-spacing: 0.1em;
    /*font-weight: bold;*/
    color: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0s;
    cursor: pointer;
}

.web-contact .web-contact-btn p a:hover {
    text-decoration: none;
    background-color: #fa6814;
    transform: translateX(-2px) translateY(-2px);
    /*transform: perspective(500px) translateZ(6px);*/
}


/* 記事一覧 */
.news {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px 10px; /* gapの古いプロパティ用 */
    gap: 20px 10px;
    margin: 100px 0;
}

.news a {
    color: #000000;
    text-decoration: none;
}

.news a:hover {
    text-decoration: underline;
}

.news h3 {
    font-size: 14px;
}

.news h2 {
    grid-column: 1 / -1;
    font-family: 'Raleway',sans-serif;
    font-size: 20px;
    font-weight: normal;
    text-align: center;
}


/* 記事一覧 */
section, aside ul {
    grid-row: recent;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px 10px;
    gap: 20px 10px;
    margin: 100px 0;
}

section a, aside a {
    color: #000000;
    text-decoration: none;
}

section a:hover, aside a:hover {
    text-decoration: underline;
}

section h3, aside h3 {
    font-size: 14px;
}

section h2 {
    grid-column: 1 / -1;
    font-family: 'Raleway',sans-serif;
    font-size: 20px;
    font-weight: normal;
    text-align: center;
}


/* フッター */
footer {
    grid-row: foot;
    grid-column: 2 / span 2;
    justify-self: left; /*横方向の位置揃え*/
    align-self: end; /*縦方向の位置揃え*/
    font-size: 13px;
    font-family: 'Raleway',sans-serif;
    margin-bottom: 40px;
}

.foot-cr {
    color: #333333;
}


/* フッターのバー */
body::after {
    content: "";
    background-color: #eeeeee;
    grid-column: 1 / -1;
    grid-row:foot;
    z-index: -1;
}


/* ===== ランディングページ ====== */

/* ヒーローイメージ */
figure.hero-lp {
    grid-column: 1 / -1;
    grid-row: title / span 2;
}

figure.hero-lp img {
    height: 100%;
    object-fit: cover; /* 画像の切り出し 高さに合わせ横幅を100%で切り出す */
    vertical-align: bottom; /*画像の下に入る余白を削除*/
    /*filter: brightness(70%);*/ /*フィルタを使い画像の明るさを調整*/
    z-index: -1; /* 重なり順を変える-一つ下へ */
    position: relative; /* z-index非対応のEdge用の設定 */
}

/* バックグランドのベースカラー */
.bgcolor-or {
    background-color: #faa913;
}

.bgcolor-bu {
    background-color: #1eade6;
}

/* タイトル */
/* アニメーション 右から左スライド-フェードイン */


/* サブタイトル */


.top p a {
    color: #ffffff;
    text-decoration: none;
    border: solid 1px #ffffff;
    padding: 10px 40px;
    display: inline-block; /* 通常padding,margin,borderはインラインボックスとなり画像がつくるボックスとの位置関係に影響を与えないため、影響を与えるように設定 */
    margin-top: 10px;
    border-radius: 10px; /* 角丸にする */
    background-color: #306794;
}
.top p a:hover {
    background-color: #ef9504;
}

/* アニメーション 左から右スライド-フェードイン */
.lp-p {
    grid-row: sub1;
    text-align: center;
    align-self: center;

    animation-duration: 4s;/* アニメーション時間 */
    animation-name: LeftToRight;/* アニメーション名 */
}

.lp-p p a {
    color: #ffffff;
    text-decoration: none;
    border: solid 1px #ffffff;
    padding: 10px 40px;
    display: inline-block; /* 通常padding,margin,borderはインラインボックスとなり画像がつくるボックスとの位置関係に影響を与えないため、影響を与えるように設定 */
    margin-top: 10px;
    border-radius: 10px; /* 角丸にする */
    background-color: #306794;
}
.lp-p p a:hover {
    background-color: #ef9504;
}

@keyframes LeftToRight {
    0% {
      opacity: 0;/* 透明 */
      transform: translateX(-300px);/* X軸方向に300px */
    }
    100% {
      opacity: 1;/* 不透明 */
      transform: translateX(0);
    }
  }



/* アニメーション 左から右スライド-フェードイン */
  .lp-sub-p {
    animation-duration: 4s;/* アニメーション時間 */
    animation-name: LeftToRight;/* アニメーション名 */
}

@keyframes LeftToRight {
    0% {
      opacity: 0;/* 透明 */
      transform: translateX(-300px);/* X軸方向に300px */
    }
    100% {
      opacity: 1;/* 不透明 */
      transform: translateX(0);
    }
  }




/* ===== 制作の流れ ===== */
.flow {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px 10px; /* gapの古いプロパティ用 */
    gap: 20px 10px;
    color: #ebebeb;
    /*margin: 100px 0;*/
    /*width: auto;*/
    margin: 0;
    padding: 100px 0;
    background-color: rgb(51, 78, 109);

}

.flow {
    color: #ffffff;
    text-decoration: none;
}

.flow-card {
    margin: 0 10%;
}

.flow-card img{
    border-radius: 0%;
}

.flow h3 {
    padding: 10px;
    margin: 20px 0;
    font-size: 24px;
    text-align: center;
    color: #c1d8eb;

    background-image: linear-gradient(to right, #d8d7d7, #d8d7d7);
	background-repeat: no-repeat;
	background-size: 96% 2%;
	background-position: bottom;
	transition: all 0.25s ease-in; 
}

.flow p {
    font-size: 20px;
    padding: 20px;
    /*margin-block-end: 10px;*/
    line-height: 1.8;
    color: #eaebe6;
}

.flow h2 {
    grid-column: 1 / -1;
    font-family: 'Sail', cursive;
    font-size: 36px;
    font-weight: normal;
    text-align: center;
    color: #ddeefc;
    margin-top: 0px;

}

.flow-waku {
    display: block;
    /*background-color: #e6edf8;*/
    border: solid 1px #bbbaba;/*線*/
    border-radius: 20px;/*角の丸み*/
    padding: 20px 10px;
    margin: 20px;
}

.flow-button {
    font-size: 16px;
    padding: 20px;
    background-color: #306794;
    color:#ffffff;
    position: absolute;
    bottom: 0;
    left:   0;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
}
.flow-button:hover {
    text-decoration: none;
    background-color: #3f78a7;
}

/* 背景色の設定 */
/*
.flow {
    content: "";
    background-color: #96d3eb;
    grid-column: 1 / -1;
}
*/


/* フォト（ワイド） */
.gallery {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1px 1px; /* gapの古いプロパティ用 */
    gap: 1px 1px;
    position: relative;
    margin: 0;
    padding: 0;
}

.gallery a {
    color: #333333;
    text-decoration: none;
}

.gallery p {
    position: absolute;
    color: #4499df;
    font-size: 2.0vw;
    line-height: 260%;
    letter-spacing: 0.3em;
    font-family: 'Raleway',sans-serif;
    text-shadow: 0 0 1px #d1cfcf;
    margin:0;
    padding:18% 0 0 4%;
    text-align: left;
}

.gallery a:hover {
    text-decoration: underline;
}


.gallery h2 {
    position: absolute;
    grid-column: 1 / -1;
    font-family: 'Sail', cursive;
    /*
    font-family: 'Alex Brush', cursive;
    font-family: 'Julius Sans One', sans-serif;
    font-family: 'Petit Formal Script', cursive;
    font-family: 'Raleway', sans-serif;
    */
    padding:4% 0 0 4%;
    font-size: 42px;
    font-weight: normal;
    text-align: center;
    color: #5d8fb8;
    letter-spacing: 0.5em;
}

.gallery-waku {
    margin:0;
    /*padding-top: 0px;*/
}

.gallery-text {
    margin: 5% 2%;
}


.gallery img {
    height: 100%;
    object-fit: cover; /* 画像の切り出し 高さに合わせ横幅を100%で切り出す */
    vertical-align: bottom; /*画像の下に入る余白を削除*/
    /*filter: brightness(70%);*/ /*フィルタを使い画像の明るさを調整*/
    /*z-index: -1; *//* 重なり順を変える-一つ下へ */
    /*position: relative;*/ /* z-index非対応のEdge用の設定 */
}

.gallery-ch {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 0px;
    gap: 0px;
    margin: 0;
    padding: 0;
}

/* 画像-アスペクト比（縦横比）固定 */
.gallery-ch img {
    width: 100%;
    height: auto;
}



/* ===== スタッフリスト ===== */
.staff {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px 10px; /* gapの古いプロパティ用 */
    gap: 20px 10px;
    color: #ebebeb;
    /*margin: 100px 0;*/
    /*width: auto;*/
    margin: 0;
    padding: 100px 0;
    background-color: #1280a1;
}

.staff {
    color: #ffffff;
    text-decoration: none;
}

.staff {
    margin: 0;
}

.staff-card img{
    border-radius: 0;
}

.staff h3 {
    padding: 10px;
    margin: 20px 0;
    font-size: 24px;
    text-align: center;
    color: #c1d8eb;

    background-image: linear-gradient(to right, #d8d7d7, #d8d7d7);
	background-repeat: no-repeat;
	background-size: 96% 2%;
	background-position: bottom;
	transition: all 0.25s ease-in; 
}

.staff p {
    font-size: 18px;
    padding: 10% 6% 8%;
    font-family: 'Julius Sans One', sans-serif;
    /*margin-block-end: 10px;*/
    line-height: 1.8;
    color: #eaebe6;
    letter-spacing: 0.5em;
}

.staff h2 {
    grid-column: 1 / -1;
    font-family: 'Sail', cursive;
    font-size: 36px;
    font-weight: normal;
    text-align: center;
    color: #ddeefc;
    margin-top: 0px;

}

.staff-waku {
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap:10px; /* 古いプロパティ */
    column-gap: 10px;
    /*background-color: #e6edf8;*/
    border: solid 1px #bbbaba;/*線*/
    /*border-radius: 20px;*//*角の丸み*/
    /*padding: 20px 10px;*/
    padding:6px 6px 0px 6px;
    margin: 20px;
}
.staff-waku-right {
    background-color: #089ea8;
}

p.staff-text {
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
}




/* SHOP情報 お問合せ */
.shop {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 50px 20px; /* gapの古いプロパティ用 */
    gap: 50px 20px;
    margin: 120px 20px;
}

.shop a {
    color: #333333;
    text-decoration: none;
}

.shop p {
    margin: 2% 5%;
    color: #504d4b;
    font-size: 16px;
    line-height: 200%;
    letter-spacing: 0.5em;
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
/*
font-family: 'Alex Brush', cursive;
font-family: 'Julius Sans One', sans-serif;
font-family: 'M PLUS 1p', sans-serif;
font-family: 'Noto Serif JP', serif;
font-family: 'Petit Formal Script', cursive;
font-family: 'Raleway', sans-serif;
font-family: 'Sail', cursive;    */
    text-shadow: 0 0 1px #acb8d3;
}

.shop a:hover {
    text-decoration: underline;
}

.shop h3 {
    font-size: 24px;
    color: #f1b400;
    text-align: center;
    font-weight: normal;
    margin: 60px 10px 30px 10px;
    letter-spacing: 0.3em;
    line-height: 200%;
    font-family: 'Raleway',sans-serif;
}

.shop h3::before {
    position: relative;
    top: 15px;
    margin: 0 15px 0 0;  
    /*content: url('../ch6ni9-HTML/img/partner100.png');*/
  }

.shop h2 {
    grid-column: 1 / -1;
    font-family: 'Sail', cursive;
    font-size: 30px;
    font-weight: normal;
    text-align: center;
    color: #5d8fb8;
    letter-spacing: 0.5em;
}

.shop-waku {
    margin:7% 0 1%;
}

p.shop-text {
    font-family: 'Julius Sans One', sans-serif;
    font-weight: bold;
    font-size: 24px;
    color: #134c7a;
}

/* コンタクトBOX */
.contact-box {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #134c7a;
    border-radius: 20px;
    background-color: #ffffff;
    padding: 30px 10px 30px 18px;
    margin: 0 12%;
}

.contact-box .box-title {
    position: absolute;
    display: inline-block;
    top: -18px;
    left: 4%;
    line-height: 1;
    font-size: 16px;
    background: #134c7a;
    padding:8px 30px 6px;
    color: #ffffff;
    font-weight: bold;
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
    letter-spacing: 0.2em;
}

.box-title {
    text-align: center;
    border-radius: 15px;
    background-color: #195d9c;
}
.contact-box p {
    margin: 0; 
    padding: 0;
    font-family: 'Anton', sans-serif;
    font-size: 24px;
    color: #134c7a;
    letter-spacing: 0.3em;
}

p.contact-box-text {
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
    font-size:12px;
}


/* ===== よくある質問 ===== */
.faq {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 50px 20px; /* gapの古いプロパティ用 */
    gap: 50px 20px;
    margin: 80px 20px;
}

.faq a {
    color: #333333;
    text-decoration: none;
}

.faq p {
    color: #ffffff;
    font-size: 20px;
    line-height: 200%;
    text-align: left;
}

.faq a:hover {
    text-decoration: underline;
}

.faq h3 {
    font-size: 24px;
    color: #f1b400;
    text-align: center;
    font-weight: normal;
    margin: 60px 10px 30px 10px;
    letter-spacing: 0.3em;
    line-height: 200%;
    font-family: 'Raleway',sans-serif;
}

.faq h3::before {
    position: relative;
    top: 15px;
    margin: 0 15px 0 0;  
    content: url('img/partner100.png');
  }

.faq h2 {
    grid-column: 1 / -1;
    font-family: 'Raleway',sans-serif;
    font-size: 30px;
    font-weight: normal;
    text-align: center;
    color: #3f78a7;
    letter-spacing: 0.5em;
}

.faq-waku {
    margin:0;
}

.faq {
    grid-column: 1 / -1;
    grid-row:main-d;
}


/* アコーディオン（Q&A) */
.s_01 .accordion_one {
    /*max-width: 1024px;*/
    margin-bottom: 10px;


}
.s_01 .accordion_one .accordion_header {
    background-color: #45bfcf;
    border-bottom: 4px solid #089ea8;
    color: #fff;
    font-size: 22px;
    font-weight: normal;
    padding: 20px 80px 20px;
    /*text-align: left;*/
    position: relative;
    cursor: pointer;
    transition-duration: 0.2s;
    border-radius: 4px;
}

.s_01 .accordion_one .accordion_header::before {
    display: inline-block;
    position: absolute;
    content: "Q";
    width: 44px;
    height: 44px;
    border: 2px solid;
    border-radius: 50%;
    /*margin-right: 10px;*/
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    background-color: #30d307;
    margin: 0;
    left: 20px;
    top: 12px;
}

.s_01 .accordion_one .accordion_header:hover {
    opacity: 0.8;
}
.s_01 .accordion_one .accordion_header .i_box {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 20px;
    width: 40px;
    height: 40px;
    border: 1px solid #fff;
    margin-top: -20px;
    box-sizing: border-box;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transform-origin: center center;
    transition-duration: 0.2s;
}
.s_01 .accordion_one .accordion_header .i_box .one_i {
    display: block;
    width: 18px;
    height: 18px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transform-origin: center center;
    transition-duration: 0.2s;
    position: relative;
}
.s_01 .accordion_one .accordion_header.open .i_box {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
.s_01 .accordion_one .accordion_header .i_box .one_i:before, .s_01 .accordion_one .accordion_header .i_box .one_i:after {
    display: flex;
    content: '';
    background-color: #fff;
    border-radius: 10px;
    width: 18px;
    height: 4px;
    position: absolute;
    top: 7px;
    left: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transform-origin: center center;
}
.s_01 .accordion_one .accordion_header .i_box .one_i:before {
    width: 4px;
    height: 18px;
    top: 0;
    left: 7px;
}
.s_01 .accordion_one .accordion_header.open .i_box .one_i:before {
    content: none;
}
.s_01 .accordion_one .accordion_header.open .i_box .one_i:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.s_01 .accordion_one .accordion_inner {
    display: none;
    padding: 30px 30px;
    border-left: 2px solid #45bfcf;
    border-right: 2px solid #45bfcf;
    border-bottom: 2px solid #45bfcf;
    box-sizing: border-box;
    border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.s_01 .accordion_one .accordion_inner p.txt_a_ac {
    margin: 0;
    color: #333333;
    position: relative;
    margin-left: 50px;
}

.s_01 .accordion_one .accordion_inner p.txt_a_ac::before {
    display: inline-block;
    position: absolute;
    content: "A";
    width: 44px;
    height: 44px;
    border: 2px solid;
    border-color: #9fd7df;
    border-radius: 50%;
    font-size: 1.8rem;
    text-align: center;
    font-weight: bold;
    background-color: #45bfcf;
    color: #ffffff;
    left: -60px;
}




/*　吹き出し　*/
.balloon1-left {
    position: relative;
    display: inline-block;
    margin: 1.5em 0 1.5em 15px;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    color: #555;
    font-size: 16px;
    background: #e0edff;
    border-radius: 15px;
  }
  
.balloon1-left:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -30px;
    margin-top: -15px;
    border: 15px solid transparent;
    border-right: 30px solid #e0edff;
}
  
.balloon1-left p {
    margin: 0;
    padding: 0;
}



/* 蛍光ペンマーカー */
.marker_yellow {
    background: linear-gradient(transparent 60%, #ffff66 60%);
}


/* チェックマーク */
ul.check li{
	list-style:none;
	padding-left:28px;
	position:relative;
}
ul.check li:before,
ul.check li:after{
	content:"";
	display:block;
	position:absolute;
}
ul.check li:before{
	width:20px;
	height:20px;
	border-radius:10px;
	background:#8CC4D9;
	left:0;top:16px;
}
ul.check li:after{
	border-left:2px solid #fff;
	border-bottom:2px solid #fff;
	width:6px;
	height:3px;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	left:6px;
	top:22px;
}






/* ===== ウェブ業務担当代行　ランディングページ ===== */

.agency-top {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px 10px; /* gapの古いプロパティ用 */
    gap: 20px 10px;
    color: #ebebeb;
    margin: 0;
    padding-top: 40px;
}

.lp-label-agency {
    /*background-color:#31302e;*/
    color: #8e9292;
    padding: 5px 0px;
    border-radius: 5px;
    /*width: 83%;*/
    margin-left: 10%;
    margin-right: 10%;
    font-size: 3vw;
    text-align: center;
}



.lp-agency {
    margin: 2% 0 3% 0%;
    font-size: 4.6vw;
    color: #ffffff;
    line-height: 1.5em;
    font-weight: normal;
    letter-spacing: 0.1em;
    /*text-shadow: 3px 0 5px #444444;*/ /* 文字に影をつける */
    text-shadow: 0 0 3px #9fcff0;   /* 文字に影をつける */
    /*font-family: 'Raleway',sans-serif;*/
    font-family: 'Julius Sans One', sans-serif;
    text-align: center;

}


/* トップ用テキスト　*/
.agency-top-wakur {
    /*grid-column: 2 /span 7;*/
    /*position: absolute;*/
    padding-left: 0%;
    padding-top: 240px;
}

.agency-top-wakur h1 {
    grid-row: title;
    justify-self: center; /*横方向の位置揃え*/
    align-self: center; /*縦方向の位置揃え*/
    color: #09aee0;
    font-size: 12vw;
    font-weight: normal;
    line-height: 1.5; /*行の間隔設定(defalt 1.5)*/
    text-shadow: 0 0 3px #9fcff0; /* 文字に影をつける */
    /*font-family: 'Raleway', sans-serif;*/
    font-family: 'Julius Sans One', sans-serif;
    letter-spacing: 0.2em;
    /*animation-duration: 4s;*//* アニメーション時間 */
    /*animation-name: RightToLeft;*//* アニメーション名 */
    text-align: center;
}

/* トップ画像 ヒーローイメージ　*/
/*
.agency-top-wakul {
    margin: 0px 20px;
    padding-top: 22%;
    width: 30%;
    position: relative;
    z-index: -1;
}
*/

/* 特徴　できること */
.feature {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px 10px; /* gapの古いプロパティ用 */
    gap: 20px 10px;
    color: #ffffff;
    margin: 100px 0;
}

.feature a {
    color: #424242;
    text-decoration: none;
}

.feature a img:hover {
    text-decoration: underline;
    box-shadow: 0 0 6px -1px rgba(0, 0, 0, 0.3);
    opacity: 0.8;
}

.feature h3 {
    font-size: 24px;
    color: #088194;
    font-weight: normal;
    padding: 20px 0;
}
.feature p {
    font-size: 20px;
    padding:20px;
    color: #333333;
    text-align: center;
    line-height: 1.6em;
}
.feature h2 {
    grid-column: 1 / -1;
    font-size: 30px;
    padding: 20px;
    font-weight: normal;
    text-align: center;
    color: #585757;
    margin:10px;
}

.feature-waku {
    background-color: #ffffff;
    border-top-left-radius: 5px 5px;
    border-top-right-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;
    border-bottom-left-radius: 5px 5px;
    padding: 20px;
    margin: 50px 20px;
    text-align: center;
    color: #333333;
}


.feature {
    content: "";
    background-color: #ebecdb;
    grid-column: 1 / -1;
}



/* ===== プライバシーポリシー ===== */
.policy {
    /*background-color: #a5dbf5;*/
    grid-row: policy; /* 配置先を指定 resentは配置先名、ラベルのようなもの*/
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px 10px; /* gapの古いプロパティ用 */
    gap: 20px 10px;
    color: #272626;
    margin: 50px 6%;
    padding: 3px;

}

.policy a {
    color: #ffffff;
    text-decoration: none;
}

.policy a img:hover {
    text-decoration: underline;
    box-shadow: 0 0 6px -1px rgba(0, 0, 0, 0.3);
    opacity: 0.8;
}

.policy h3 {
    font-size: 16px;
    padding: 24px 10px;
    background-color: #f1a52a;
    color: #ffffff;
    position: relative;
}

.policy h2 {
    grid-column: 1 / -1;
    font-family: 'Raleway',sans-serif;
    font-size: 24px;
    font-weight: normal;
    text-align: center;
    color: #4d4b4b;
}

.policy ul {
    position: relative;
	padding: 0.5em;
    list-style-type: none;
}

.policy li {
	padding: 0.5em 0 0.5em 1em;
    line-height: 1.5;
    position: relative;
}

/*　リスト装飾「円-〇」*/
.policy ul li::after {
    display: block;
    content: '';
    position: absolute;
    top: 1em;
    left: 0em;
    width: 5px;
    height: 5px;
    background-color: #fff;
    border: 1px solid #3498db;
    border-radius: 100%;
}

.policy dl {
    margin: 0;
}

.policy dt {
    background-color: #4d9fc0;
    color: #ffffff;
    padding: 10px 20px;
    margin: 10px 0;
}

.policy dd {
	padding: 0.5em 0 1.5em 0.5em;
    line-height: 1.5;
}


.policy li::before {
    position: absolute;
}
.policy-subcopy {
    /*background-color: #f7f5eb;*/
    padding: 20px 20px;
    margin: 10px 0;
    border: solid 1px #b6b8bd;
}




/* ===== 記事ページ ===== */
.post {
    grid-template-rows: 
        [head] 100px
        [kiji] auto
        [submenu] auto
        [foot] 100px;
}

/* 記事ページ：記事 */
.post article {
    grid-row: kiji;
}

.post article > * {
    margin-top: 1em;
    margin-bottom: 1em;
    display: block;
}

.post article p {
    line-height: 2;
}

/* 記事ページ：バー */
.post::before {
    content: "";
    background-color: #eeeeee;
    height: 2px;
    grid-column: 1 / -1;
    grid-row: kiji;
}


/* 記事ページ：時計アイコン */
.fa-clock {
    color: #888888;
    margin-right: 5px;
}


/* 記事ページ：サブメニュー */
.post div {
    grid-row: submenu;
}

aside {
    border: solid 1px #dddddd;
    padding: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
}

aside h2 {
    border-bottom: solid 1px #dddddd;
    padding-bottom: 20px;
    margin-bottom: 20px;
    color: #888888;
    font-weight: nomarl;
    font-family: 'Raleway',sans-serif;
}

aside p {
    font-size: 14px;
}

aside:first-child img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

aside ul {
    list-style: none;
    padding: 0;
    text-align: left;
}


/* ===== ABOUT ページ ===== */
table {
    border-collapse: collapse;
}

th, td {
    border: solid 1px #cccccc;
    padding: 20px;
}

th {
    width: 4em;
    text-align: left;
    background-color: #555d6b;
    color: #ffffff;
}
td {
    background-color: #e8eef9;
}


/* ===== CONTACT US ページ ===== */

/* お問い合わせフォーム */

.contact {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 50px 20px; /* gapの古いプロパティ用 */
    gap: 50px 20px;
    margin: 120px 10%;
    text-align: center;
}

.contact a {
    color: #333333;
    text-decoration: none;
}

.contact p {
    color: #504f4f;
    font-size: 18px;
    line-height: 150%;
    text-align: left;
    margin: 10px 20px 0px 20px;
    padding:6px;
}

.contact a:hover {
    text-decoration: underline;
}


.contact h2 {
    grid-column: 1 / -1;
    font-family: 'Sail', cursive;
    font-size: 30px;
    font-weight: normal;
    text-align: center;
    color: #5d8fb8;
    letter-spacing: 0.5em;
}


.contact1-waku {
    margin: 0;
    padding: 0;

}

input {
    background: #eee;
    border: 1px solid #bebebe;
    /*font-size: 1em;
    text-indent: 0.7em;*/
    border-radius: 4px;
  }

  
  input:focus {
    background: #edf4ff;
    border: 1px solid #4881d9;
  }

  textarea {
    background: #eee;
    border: 1px solid #bebebe;
    /*font-size: 1em;*/
    border-radius: 4px;
  }

  textarea:focus {
    background: #edf4ff;
    border: 1px solid #4881d9;
  }



form p {
    margin-bottom: 20px;
}

input, textarea {
   width: 100%;
    box-sizing: border-box;
    padding:10px;
    margin: 2px;
}

input::placeholder {
    color: #979797;
}
textarea::placeholder {
    color: #979797;
 }

textarea {
    height: 120px;
}

input[type="submit"] {
    border: 1px solid #e76901;
    background-color: #ff7300;
    background-image: -webkit-linear-gradient(top, #eb8939, #f07612);
    background-image: linear-gradient(to bottom, #eb8939, #f07612);
    border-radius: 4px;
    -webkit-transition: none;
    transition: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    color: #ffffff;
    letter-spacing: 0.5em;
    width: 200px;
}

input[type="submit"]:hover {
    border:1px solid #faab0c;
    background-color: #f3af26;
    background-image: -webkit-linear-gradient(top, #f3a126, #dd8b10);
    background-image: linear-gradient(to bottom,  #f3a126, #dd8b10);
    cursor: pointer;
    cursor: hand;
}


/* ===== ソーシャルアイコン装飾 ===== */

  .follow-me {
    list-style: none;
    margin: 5px 0 5px;
    overflow: hidden;
    padding: 0;
  }
  .follow-me li {
    float: left;
    margin: 0 4px 8px 4px;
    padding: 0;
  }
  .follow-me li a::before {
    background-color: #eee;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    color: #333;
    display: inline-block;
    font-family: FontAwesome;
    font-size: 16px;
    height: 44px; /* Button height */
    line-height: 44px; /* Button height */
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    text-align: center;
    width: 44px; /* Button width */
  }
  .follow-me li a:hover::before {
    color: #fff;
  }
  .follow-me li a[href*="facebook.com"]::before       { content: "\f09a"; }
  .follow-me li a[href*="plus.google.com"]::before    { content: "\f0d5"; }
  .follow-me li a[href*="b.hatena.ne.jp"]::before     { content: "\f027"; font-family: blogicon; }
  .follow-me li a[href*="instagram.com"]::before      { content: "\f16d"; }
  .follow-me li a[href*="linkedin.com"]::before       { content: "\f0e1"; }
  .follow-me li a[href*="pinterest.com"]::before      { content: "\f0d2"; }
  .follow-me li a[href*="getpocket.com"]::before      { content: "\f265"; }
  .follow-me li a[href*="skype.com"]::before,
  .follow-me li a[href*="skype:"]::before             { content: "\f17e"; }
  .follow-me li a[href*="tumblr.com"]::before         { content: "\f173"; }
  .follow-me li a[href*="twitter.com"]::before        { content: "\f099"; }
  .follow-me li a[href*="vine.co"]::before            { content: "\f1ca"; }
  .follow-me li a[href*="youtube.com"]::before        { content: "\f16a"; }
  .follow-me li a[href$="/feed"]::before              { content: "\f09e"; }
  
  .follow-me li a[href*="facebook.com"]:hover::before       { background-color: #3b5998; }
  .follow-me li a[href*="plus.google.com"]:hover::before    { background-color: #dc4e41; }
  .follow-me li a[href*="b.hatena.ne.jp"]:hover::before     { background-color: #008fde; }
  .follow-me li a[href*="instagram.com"]:hover::before      { background-color: #125688; }
  .follow-me li a[href*="linkedin.com"]:hover::before       { background-color: #0077b5; }
  .follow-me li a[href*="pinterest.com"]:hover::before      { background-color: #bd081c; }
  .follow-me li a[href*="getpocket.com"]:hover::before      { background-color: #ef3f56; }
  .follow-me li a[href*="skype.com"]:hover::before,
  .follow-me li a[href*="skype:"]:hover::before             { background-color: #00aff0; }
  .follow-me li a[href*="tumblr.com"]:hover::before         { background-color: #36465d; }
  .follow-me li a[href*="twitter.com"]:hover::before        { background-color: #55acee; }
  .follow-me li a[href*="vine.co"]:hover::before            { background-color: #11b58a; }
  .follow-me li a[href*="youtube.com"]:hover::before        { background-color: #cd201f; }
  .follow-me li a[href$="/feed"]:hover::before              { background-color: #ffa500; }


/* ページのトップへ戻るボタン設置　*/
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
#page-top a  {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 70px;
    padding: 25px 0;
    text-align: center;
    display: block;
    border-radius: 50px;
    opacity: 0.6;
}
#page-top a:hover {
    text-decoration: none;
    background: #999;
}


/*　テキスト装飾　*/

.nre    {
    color: #cd201f;
}

.bre    {
    color: #cd201f;
    font-weight: bold;
}

.ul-ye  {
    background:linear-gradient(transparent 70%, #FFFF00 0%);
}


@media screen and (max-width: 960px) {
    .pc-nav {
        display: none;
     }
    .sp-nav {
        z-index: 1;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        display: block;
        width: 100%;
        background: rgba(0, 0, 0, .8);
        opacity: 0;
        transform: translateY(-100%);
        transition: all .2s ease-in-out;
     }
     #hamburger {
        position: relative;
        display: block;
        width: 30px;
        height: 25px;
        margin: 0 0 0 0 auto;
        margin-right: 18px;
     }
     #hamburger span {
        position: absolute;
        top: 50%;
        left: 0;
        display: block;
        width: 100%;
        height: 4px;
        background-color: #333333;
        transform: translateY(-50%);
        border-radius: 4px;
     }
     #hamburger::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background-color: #333333;
        border-radius: 4px;
     }
     #hamburger::after {
        content: '';
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 70%;
        height: 4px;
        background-color: #333333;
        border-radius: 4px;
     }
     /*スマホメニュー*/
     .sp-nav ul {
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
     }
     .sp-nav li {
        margin: 0;
        padding: 0;
     }
     .sp-nav li span {
        font-size: 15px;
        color: #fff;
     }
     .sp-nav li a, .sp-nav li span {
        display: block;
        padding: 20px 0;
     }
     /*-閉じるアイコンー*/
     .sp-nav .close {
        position: relative;
        padding-left: 20px;
     }
     .sp-nav .close::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        display: block;
        width: 16px;
        height: 1px;
        background: #fff;
        transform: rotate( 45deg );
     }
     .sp-nav .close::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        display: block;
        width: 16px;
        height: 1px;
        background: #fff;
        transform: rotate( -45deg );
     }
     .toggle {
        transform: translateY( 0 );
        opacity: 1;
     }

 }


/* ============================== */
/*          PC 版の設定            */
/* ============================== */

@media (min-width: 960px) { /*768->960*/

/* PC 版：スマホメニューを非表示 */
.sp-nav {
    display: none;
}
     
/* PC 版：ページ全体の設定 */
body {
    grid-template-columns: 
        0.2fr repeat(6,1fr) 0.2fr;
    grid-column-gap: 5%; /* 古いプロパティ */
    column-gap: 5%;
    grid-template-rows: 
        [head] 0px
        [title] auto
        [sub1] auto
        [main-d] auto
        [foot] 120px;
}


/* PC 版：ヘッダー */
header {
    justify-self: start;
    font-size: 30px;
    top: 0;
}

header::before {
    display: block;
    float: left;
    /*margin: -5px 15px 0 0;*/  
    /*content: url('img/logo-iconlw-top.png');*/
}

header.transform{
    margin: 5px;
    background: rgba(255,255,255,0.8);
    padding: 10px 5px 15px 25px;
    justify-content: space-between;
    transition: .5s;
    border: solid 1px #ffffff;
}


/* PC 版：ナビゲーションメニュー */
.head-nav { 
    justify-self: end;
    align-self: center;
}
.head-nav ul {
    grid-column-gap: 20px; /*列の余白　古いプロパティ用*/
    column-gap: 20px;　/*列の余白　新プロパティ用*/
}


/* PC 版：ナビゲーションメニュー */
nav ul {        
    padding: 0;
    margin-top: 0;
    float: left;
    grid-auto-flow: column;/*グリッドを横並びにする*/
    grid-column-gap: 10px; /*列の余白　古いプロパティ用*/
    column-gap: 10px;　/*列の余白　新プロパティ用*/
}


nav li {
    margin: 10px 0px 5px 0px;
    padding: 0 10px 5px 10px;
}

nav a {
    display: inline-blok;
}

.clear {
    clear: both;/* 左寄せfloatをクリア */
    }

.main-waku {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
}

/* 改行しない （スマホ時は改行）*/
.sp_br{
    display: none;
  }

/* チェックリスト */
ul.check li:before{
	left:0;top:18px;
}
ul.check li:after{
	left:6px;
	top:24px;
}

/* タイトル */
.top h1 {
    font-size: 3vw;
}



/* PC 版　設定　*/

.concept-text {
    margin: 5% 15%;
}

.concept h2 {
    font-size: 38px;
}

/* PC 版：ヒーロー画像 */
figure.hero-lp img {
    height: 860px;
}

/* PC 版：商品リスト */
.shopping {
/*    grid-template-columns: repeat(3,1fr);*/
/*    grid-column-gap: 5px; *//* 古いプロパティ */
    column-gap: 5px;
    padding-left: 3%;
    padding-right: 3%;
}

.shopping-waku {
    grid-template-columns: 1fr 1fr;
    grid-column-gap:10px; /* 古いプロパティ */
    column-gap: 10px;
}

.shopping h3 {
    text-align: left;
}
.shopping p {
    text-align: left;
}

/* コンタクトBOX */
.contact-box {
    margin: 0 28%;
}

.contact-box p {
    font-size: 30px;
}

p.contact-box-text {
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
    font-size:14px;
}

/* フォト */
.w-photo p {
    font-size: 1.4vw;
    line-height: 260%;
    letter-spacing: 0.3em;
}

/* ギャラリー */
.gallery p {
    font-size: 1.4vw;
    line-height: 260%;
    letter-spacing: 0.3em;
}

.gallery a:hover {
    text-decoration: underline;
}


/* ===== 利用ガイド===== */
.flow {
    grid-template-columns: repeat(2,1fr);
    grid-gap: 20px 10px; /* gapの古いプロパティ用 */
    gap: 20px 10px;
    color: #ebebeb;
    /*margin: 100px 4%;*/
}

.gallery h2 {
    font-size: 50px;
}

.gallery-ch {
    grid-template-columns: repeat(4,1fr);
}

.staff {
    /*    grid-template-columns: repeat(3,1fr);*/
    /*    grid-column-gap: 5px; *//* 古いプロパティ */
        column-gap: 5px;
        padding-left: 3%;
        padding-right: 3%;
}
    
.staff-waku {
        grid-template-columns: 2fr 1fr;
        grid-column-gap:10px; /* 古いプロパティ */
        column-gap: 10px;
        /*background-color: #089ea8;*/
        
}
    


/* PC 版：お問い合わせバナー */
.web-contact {
    grid-template-columns: repeat(6,1fr);
    grid-column-gap: 5px; /* 古いプロパティ */
    column-gap: 5px;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 3%;
    padding-right: 3%;
}
.web-contact-waku {
    grid-column: 1 / span 6;
    padding: 0;
    margin: 50px 2%;
}

.web-contact p {
    font-size: 20px;
}
.web-contact h2 {
    font-weight: normal;
    font-size: 32px;
    letter-spacing: 0.2em;
    line-height: 200%;
}

/* 装飾CSS 詳細ボタン */
.web-contact .web-contact-btn p a {
    padding: 30px 50px;
    font-size: 24px;
}




/* PC 版：お問い合わせフォーム */
.contact {
    max-width: 960px; 
    margin-right: auto;
    margin-left: auto;
    margin: 120px 20%;
}


/* PC 版：フッター部 コピーライト*/
footer {
    grid-column: -4 / span 2;
    justify-self: center; /*横方向の位置揃え*/
    align-self: start; /*縦方向の位置揃え*/
    font-size: 13px;
    font-family: 'Raleway',sans-serif;
    margin-top: 45px;
    margin-left: 40px;
}


/* ===== PC 版：セカンドページ全体の設定 ===== */
.secpage {
    grid-template-columns: 
        0.2fr repeat(6,1fr) 0.2fr;
    grid-column-gap: 5%; /* 古いプロパティ */
    column-gap: 5%;
    grid-template-rows: 
        [head] 200px
        [title] auto
        [sub1] auto
        [main-d] auto
        [foot] 120px;
}

.prof {
    grid-template-columns: repeat(6,1fr);
}
.prof-waku {
    grid-column: 1 / span 4;
}

/* ===== PC 版ランディングページの設定 ===== */


/* ===　ウェブ担当代行　=== */

.agency-top {
    /*grid-template-columns: repeat(8,1fr);*/
    grid-column-gap:10px; /* 古いプロパティ */
    column-gap: 10px;
    margin: 0;
    padding-top: 20px;
}

.lp-label-agency {
    padding: 5px 20px;
    border-radius: 5px;
    /*text-align: center;*/
    /*width: 62%;*/
    /*margin-left: 16%;*/
    font-size: 26px;
}

.lp-agency {
    /*text-align: left;*/
    font-size: 2.0vw;
    /*font-weight: bold;*/
    letter-spacing: 0.1em;
    margin: 0;
}

.agency-top-wakur {
    grid-column: 1 /span 5;
    /*text-align: right;*/
    margin: 0;
    padding-left: 0%;
    padding-top: 0px;
    margin-left: 54%;
    padding-top: 380px;

}

.agency-top-wakur h1 {
    font-size: 4.4vw;
}

.agency-top-wakul {
    /*grid-column: 2 /span 1;*/
    width: 100%;
    padding-top: 0px;
}

/* PC 版：特徴 出来ること */
.feature {
    grid-template-columns: repeat(3,1fr);
    grid-column-gap: 5px; /* 古いプロパティ */
    column-gap: 5px;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 3%;
    padding-right: 3%;
}
.feature-waku {
    padding: 20px;
    margin: 50px 5px;
    text-align: center;
}





}
/* ============================== */
/*       PC 版の設定 ワイド        */
/* ============================== */
@media (min-width: 1280px) { 

/* PCワイド 版：コンセプト */
.main-waku {
    max-width: 1270px; /*1278px*/
    margin-right: auto;
    margin-left: auto;

}


/* コンテナ設定 strat */
/* コンテナからの開放 - 横幅いっぱいに*/
.Release-container {
	margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    
}

/* 背景だけ広がるセクション */
.section-container {
	padding-right: calc(50vw - 50%);
	padding-left: calc(50vw - 50%);
}
/* コンテナ設定 end */





}
/* ===== PC 版の設定はここまで ===== */