@charset "utf-8";
/*
=======================================
    Reset CSS
=======================================
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, main, menu, nav, section, summary,
time, mark, audio, video{
    margin:0;
    padding:0;	
}

article,aside,details,figcaption,figure,	
footer,header,main,menu,nav,section{
    display:block;
}

html{
    /* スマートフォンでの文字サイズ拡大防止 */
    -webkit-text-size-adjust: 100%;
    color: #162442;
    /*フォントサイズにremを使う場合はブラウザのデフォルトである16pxに対して62.5%を設定することが多い。そうするとベースが10pxとなって他の要素のフォントサイズの計算が簡単になる。(例)30pxにしたい場合は1.6remなど*/
      font-size: 62.5%;
      /* 文字詰め 「」。など */
      font-feature-settings: 'palt' 1;
    }
    
/* カラム落ちを防ぐため全ての要素でwidthのサイズの中にpaddingを含めるようにする */
* { box-sizing: border-box;}
/* 擬似要素のbox-sizingは親要素の値を継承する */
*::before, *::after { box-sizing: inherit; }

body{
    /*スマホで横にすると文字の大きさが変わって崩れるのを防ぐ。bodyか文字サイズを調整したい要素に入れる*/
      -webkit-text-size-adjust: 100%;
      background-color: #fff;
      font-family: sans-serif;
      font-size: 1.6rem;
      line-height: 1.8;
      font-family: a-otf-ud-shin-maru-go-pr6n,sans-serif;
      font-weight: 300;
      font-style: normal;
    }
nav{
      font-weight: bold;
    }

/*画像のフルードイメージ化*/
img{
    border: 0;
    max-width: 100%;
    height: auto;
    }

ul,ol{
    list-style-type: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
img, input, select, textarea {
    vertical-align: middle;
}

button {
    margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	vertical-align: middle;
	text-align: inherit;
	font: inherit;
	-webkit-appearance: none;
	appearance: none;  
}

a {
    color: #162442;
    transition: 0.5s;
    text-decoration: none;
}
a:hover {
    color: #81d87e;
}
/*画像をhoverした時透過させる(ロゴやSNSアイコンで使用)*/
a:hover img{
    opacity: 0.7;
}


/*
=========================================
    Base Layout
=========================================
*/

/*container*/
.container {
    max-width: 960px;
    height: auto;
    margin: 0 auto;
    padding-right: 20px;
    padding-left: 20px;
    background-size: cover;
}

.section {
    margin-top: 10rem;
    text-align: center;
}

h2 {
    font-family: kan412typos-std,sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 4.2rem;
}


/*
=========================================
    Modules（Block）
=========================================
*/

/*header
--------------------*/


/* ヘッダー全体のレイアウト */
header {
    background: linear-gradient(#474c88, #162442);
    padding: 5px 10px;
    width: 100%;
    height: 70px;
    position: fixed;
    z-index: 100;
}

/* .header-container {
    max-width: 960px;
    height: auto;
    margin: 0 auto;
    padding-right: 20px;
    padding-left: 20px;
} */

header p {
    text-align: left;
    margin: 0;
    font-family: century-gothic,sans-serif;
    font-weight: 400;
}

.logo a {
    color: #fff;
}

.logo a:hover {
    color: #81d87e;
}

/* ハンバーガーメニュー */
/* ナビゲーション全体のレイアウト */
/* ボタンのデザイン */
.nav-btn {
    /* ボタンの配置位置  */
    position: fixed;
    top: 26px;
    right: 16px;
    /* 最前面に */
    z-index: 110;
    /* ボタンの大きさ  */
    width: 30px;
    height: 18px;
    /* background: linear-gradient(#474c88, #162442); */
    /* z-index: 9999; */
}

/* 線のデザイン */
/* 真ん中の線 */
.nav-btn-icon {
    display: block;
    position: relative;  /* バーガー線の位置基準として設定 */
	width: 100%;  /* 線の長さと高さ */
	height: 2px;
	background-color: #fff;  /* バーガー線の色 */
	transition: .2s;
}
/* 上下の線 */
.nav-btn-icon::before, .nav-btn-icon::after {
    content: "";
    /* 基準線と同じ大きさと色 */
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transition: .5s;
}
/* 上の線 */
.nav-btn-icon::before {
    transform: translateY(-16px);
}
/* 下の線 */
.nav-btn-icon::after {
    transform: translateY(16px);
}

/* 動きを付ける */
/***** メニューオープン時 *****/
.nav-btn-icon.open {
	background-color: transparent;  	/* 真ん中の線を透明に */
    z-index: 90;
}

.nav-btn-icon.open::before, .nav-btn-icon.open::after {
	content: "";
	background-color: #81d87e;  /* 上下の線の色を変える */
	transition: .2s;
}

.nav-btn-icon.open::before {
	transform: rotate(45deg);  /* 上の線を傾ける */
}

.nav-btn-icon.open::after {
	transform: rotate(-45deg);  /* 下の線を傾ける */
}
/***** /メニューオープン時 *****/
/* /ハンバーガーメニュー */

/* グローバルナビのデザイン */
.nav-container {
    /* メニューを縦に */
    width: 70%;
    display: flex;
    flex-direction: column;
    /* メニューの位置マイナス指定で画面外に */
    position: fixed;
    /* メニューエリア幅以上のマイナス指定をする */
    right: -70%;
    width: 70%;
    height: 100vh;
    margin-left: auto;
    background: linear-gradient(#474c88, #162442);
    color: #fff;
    transition: .3s;
}

.nav-item {
    width: 100%;
    height: 60px;
    /* メニューテキストをリスト中心に */
    display: flex;
    justify-content: center;
    align-items: center;
}

header nav ul li a {
    color: #fff;
}

header nav ul li a:hover {
    color: #81d87e;
    cursor: pointer;
    transition: .3s;
}

/* メニューオープン時位置を0にして画面内に表示させる */
.nav-container.open {
    position: absolute;
    right: 0;
    z-index: 100;
  }
/* /グローバルナビのデザイン */


/* レスポンシブ */
@media screen and (min-width: 768px) {
header {
    padding: 0 0;
    width: 100%;
    position: fixed;
    z-index: 100;
    transition: 0.3s ease-in-out;
}

.nav-btn {
    display: none;
}

.header-container {
    display: flex;
    height: 70px;
    /* 最初の要素(ロゴ)は左揃え、あとは右揃え(ナビ) */
    justify-content: flex-end;
}
    /* 最初の要素(ロゴ)は左揃え、あとは右揃え(ナビ) */
    /* 上のflex-endとセットで使う */
.header-container >:first-child {
    margin-right: auto;
}

.logo-container {
    /* 上下中央揃え */
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo {
}

.nav-btn {
    display: none;
}

/* この箱を用意することによりナビゲーションとハンバーガーメニューを一括りにしてメニューの幅を広げる */
.header-right {
    width: 70%;
}

#nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
ul.nav-container {
    /* SPで設定したposition:fixedを打ち消し */
    position: static;
    /* メニューを横並びに */
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 70px;
    right: auto;    
}
li.nav-item {
    text-align: right;
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
}

/* hoverエフェクト */
.nav-container li a {
    position: relative;
}

/* .currentは現在地にのみ付けたclass名。今回は不要なので割愛 */
/* .nav-container li.current a,
.nav-container li a:hover {
    color: #81d87e;
} */

.nav-container li a::after {
    content: "";
    display: inline-block;
    /* 線の位置を決める */
    position: absolute;
    bottom: 0;
    left: 10%;
    /* 線の形 */
    width: 80%;
    height: 2px;
    background: #81d87e;
    /* アニメーションの指定 */
    transition: all .3s;
    transform: scale(0, 1);
    transform-origin: left top;

}
/* 現在地とhoverの設定 */
.nav-container li a:hover::after {
    content: "";
    transform: scale(1, 1);
}

}
/* /ナビゲーション全体のレイアウトここまで */

/*section
--------------------*/

/* 全体の設定 */
/* アンカーリンク先の調整 */
#skill, #work, #profile, #contact {
    margin-top: 30px;
}
#banner-sns, #other {
    /* marginで指定してしまうと上の要素(work-lead)と相殺されてしまうので
    paddingで指定 */
    padding-top: 60px;
}
/* /アンカーリンク先の調整 */

/* トップへ戻るjボタン */
#page-top{
    width: 50px;
    height: 50px;
    position: fixed;
    right: 0;
    bottom: 0;
    background: linear-gradient(#474c88, #162442);
    border-radius: 50%;
    z-index: 100;
  }
  #page-top a{
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    text-decoration: none;
  }
  #page-top a::before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f106';
    font-size: 25px;
    color: #fff;
    position: absolute;
    width: 25px;
    height: 25px;
    top: -18px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
  }

/* /トップへ戻るボタン */  
  


/* メインビジュアル  */

.main-visual {
    height: 556px;
    padding-top: 8.2rem;

    /* 背景左画像 */
    background-image: url(../img/lemon2.png);/* 左画像 */
    
    background-position: left 0px top 74px;/* 左画像の位置 */

    /* 画像の設定 */
    background-repeat: no-repeat;

    /* 画像のサイズ */
    background-size: 40%;

}

#contents {
}

.mainvisual {
    background-size: cover;
}

/* メインビジュアル右画像 */
.main-right-image {
        /* 背景画像 */
    background-image:
    url(../img/lemonade3.png);/* 右画像 */

    background-position:
    right 0px bottom -30px;/* 右画像の位置 */

    /* 画像の設定 */
    background-repeat: no-repeat;

    /* 画像のサイズ */
    background-size: 60%;
}

h1 {
    text-align: center;
    margin-top: 12rem;
    margin-bottom: -1.36rem;
    font-size: 5rem;
    font-family: fairwater-solid-serif,sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* 擬似要素。タイトルの上にあしらいを付ける */
h1::before {
    content: '';
    display: block;/* 前後に改行 */
    margin: 0 auto;
    background-image: url(../img/naomoriyama-logo.svg);
    width: 110px;
    height: 75px;
    margin-bottom: -0.2rem;/* 擬似要素とタイトルの間の余白。line-heightを考慮しネガティブマージン */
    background-size: contain;/* 画像の縦横比は保持して指定サイズ内に収まるようにする */
}

.title-lead {
    text-align: center;
    font-size: 1.4rem;
    letter-spacing: 0.4rem;
}

/* メインビジュアルレスポンシブ */
@media screen and (min-width: 768px) {
    .main-visual {
        height: 556px;
        padding-top: 8.2rem;
    
        /* 背景左画像 */
        background-image: url(../img/lemon2.png);/* 左画像 */
        
        background-position: left 0px top 75px;/* 左画像の位置 */
    
        /* 画像の設定 */
        background-repeat: no-repeat;
    
        /* 画像のサイズ */
        background-size: 246px 382px;
        }
    
    .mainvisual {
        background-size: cover;
        }
    
    /* メインビジュアル右画像 */
    .main-right-image {
            /* 背景画像 */
        background-image:
        url(../img/lemonade3.png);/* 右画像 */
    
        background-position:
        right 0px bottom -30px;/* 右画像の位置 */
    
        /* 画像の設定 */
        background-repeat: no-repeat;
    
        /* 画像のサイズ */
        background-size: 353px 324px;
    }
    
    h1 {
        text-align: center;
        margin-top: 8rem;
        margin-bottom: -1.36rem;
        font-size: 7.0rem;
        font-family: fairwater-solid-serif,sans-serif;
        font-weight: 400;
        font-style: normal;
    }
}

/*section できること
--------------------*/

/* 波型の背景 */
/* ここから上の波 */
/* ベース */

/* idとclassのskillを重ねて背景色を付ける */
.skill-background {
    position: relative;
    width: 100%;
    height: 0;/* 波型上部からh2までの余白 */
    background-color: #fefee3;
}
/* /idとclassのskillを重ねて背景色を付ける */

#skill {
    position: absolute;
    margin-top: 30px;
}
/* コンテンツ背景 */
.wave {
    background-color: #fefee3;
}

.skill-container {
    position: relative;
    width: 100%;
    padding-bottom: 0;
    margin-top: 0;
}
.skill-container::before {
    content: "";
    display: block;
    padding-top: 10%;
}
.wave-top {
    position: absolute;
    top: -6px;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url(../img/wave.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 10;
}

.skill-container-bottom {
    position: relative;
    z-index: 0;
    width: 100%;
    /* 画像を下に移動し波型が見えるように */
    top: 3rem;
}
.skill-container-bottom::after {
    content: "";
    display: block;
    padding-bottom: 10%;
}
.wave-bottom {
    position: absolute;
    top: -3px;
    bottom: -38px;
    left: 0;
    right: 0;
    background-image: url(../img/wavebottom.png);
    background-repeat: no-repeat;
    background-size: cover;
}
/* /波型の背景 */

.skill-inner {
    height: auto;
    margin: 0 auto;
    background-size: cover;
    text-align: center;
}

.skill-title {
    margin-bottom: 4.56rem;
}

/* できることコメント */
.concept {
    margin: 0 auto;
    position: relative;
    padding: 4rem 2rem;
    text-align: center;
    width: 80%;
}

.concept::before,
.concept::after {
  position: absolute;
  content: '';
}

.concept::after {
  top: 0;
  left: 0;
  width: 100px;
  height: 40px;
  border-top: 1px solid #162442;
  border-left: 1px solid #162442;
}

.concept::before {
  right: 0;
  bottom: 0;
  width: 100px;
  height: 40px;
  border-right: 1px solid #162442;
  border-bottom: 1px solid #162442;
}
/* /できることコメント */

/* スキル画像Flexbox */
.container-skill {
    max-width: 960px;
    height: auto;
    margin: 0 auto;
    padding-right: 20px;
    padding-left: 20px;
}

.container-skill ul {
    text-align: center;
}

.skill-list {
    margin-bottom: 5rem;
}

.skill-list li img {
    width: 200px;
    height: 216px;
    margin-top: 8.0rem;
    display: inline-block;
}

/* /スキル画像Flexbox */

/* スキルアイコン */
.skill-list-icon {
    margin-top: 5.0rem;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0 auto;
    margin-bottom: 5rem;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    text-align: center;
    list-style-type: none;
}
 
.skill-list-icon-bottom {
    margin-top: 0;
    margin-bottom: 8.4rem;
}
.skill-list-icon-bottom:nth-child(3), .skill-list-icon-bottom:nth-child(4) {
    margin: 0 -10px 0;
}

.skill-list-icon-top {
    margin-bottom: 0;
}

/* アイコンとキャプションのセットの間隔調整 */
.skill-list-iconset {
    /* width: 120px;
    height: auto;
    margin: 0;
    text-align: center; */
    display: inline-block;
    text-align: center;
}

.skill-list-icon-img {
    width: 60px;
    height: 58.5px;
    margin-top: 4rem;
}

.skill-list-caption {
    margin-top: 1.0rem;
    font-size: 1.8rem;
    line-height: 1.0;
}

.skill-list-small {
    font-size: 1.0rem;
}


/* 詳しくはこちらボタン */
/*その他と主な共通部分は省略*/
a.btn-radius-solid {
    background: #c1d4c0;
    background: -webkit-gradient(linear, left top, left bottom, from(#F9F871), to(#81D87E));
    background: -webkit-linear-gradient(top, #F9F871 0%, #81D87E 100%);
    background: linear-gradient(to bottom, #F9F871 0%, #81D87E 100%);
    padding: 1rem 5rem 1rem 5rem;
    -webkit-box-shadow:
    0 5px 5px rgba(0, 0, 0, 0.2);
    box-shadow:
    0 5px 5px rgba(0, 0, 0, 0.2);
    width: 244px;
    height: 47px;
    text-align: center;
  }
  
  a.btn-radius-solid:hover {
    background: -webkit-gradient(linear, left bottom, left top, from(#F9F871), to(#81D87E));
    background: -webkit-linear-gradient(bottom, #F9F871 0%, #81D87E 100%);
    background: linear-gradient(to top, #F9F871 0%, #81D87E 100%);
  }
  .fa-position-right {
      padding-left: 1rem;
  }
    /* 自己紹介エリア */
  p.btn-profile {
    position: relative;
    top: -12rem;
  }
  @media screen and (min-width: 768px) {
    p.btn-profile {
    position: relative;
    top: -13rem;
    }
  }
  /* /自己紹介エリア */
/* /詳しくはこちらボタン */

/* スキルエリアレスポンシブ */
@media screen and (min-width: 768px) {
    .skill-grid-col2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .skill-list-icon {
        margin-top: 5.0rem;
        width: 70%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        list-style-type: none;
    }
    .skill-list-iconset {
        margin: 60px 0;
    }
}


/*section 自己紹介
--------------------*/

/* #profile {
    margin-top: 3rem;
} */

#profile h2 {
    margin-top: 20rem;
}

/* .profile-flex {
    margin-top: 4.0rem;
    margin-bottom: 5.0rem;
} */

.profile-left {
    /* 似顔絵画像を中央寄せ */
    text-align: center;    
}
.profile-right {
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}


.profile-img img {
    padding-top: 4rem;
}

.profile-name {
    font-size: 2.2rem;
    letter-spacing: 0.2em;
    text-align: center;
    padding-top: 2.12rem; 
    /* padding-bottom: 2.12rem; */
}

.profile-name-kana {
    font-size: 1.6rem;
    letter-spacing: 0.2em;
    text-align: center;
    /* padding-top: 2.12rem;  */
    padding-bottom: 2.12rem;
}

.profile-content {
    /* 囲みを縦方向に中央・下寄せ */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* 囲みのデザイン */
    background: none;
    border: 1px solid #162442;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 6rem;
    padding: 20px 20px 76px 20px;
    position: relative;
    font-size: 1.6rem;
    text-align: left;
    line-height: 2.2em;
}

.profile-content:after {
    background: repeating-linear-gradient(-45deg, #fefee3, #fefee3 5px, #fff 0, #fff 10px);
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* 囲み枠レスポンシブ用 */
@media screen and (min-width: 768px) {
    p.profile-right {
        margin-bottom: 1.4rem;
        margin-top: 4rem;
    }
    .profile-content {
        margin: 0 auto;
        width: 800px;
        padding: 6rem 6rem 10rem 6rem;
        margin-bottom: 6rem;
    }
}
/* @media (min-width: 600px){
    .flexbox {
        display: -webkit-flex;
        display: flex;
    }
    
    p.profile-right {
        text-align: left;
        margin-left: 1.8em;
        margin-bottom: 1.4rem;
        margin-top: 4rem;
    }
    .profile-img {
        margin-top: 2rem;
    }
} */

/* レスポンシブ*/
/* @media screen and (min-width: 768px) {
    .profile-flex {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin: 0 auto;
      padding-left: 20px;
      padding-right: 20px;
      margin-bottom: 6rem;
    }
    .profile-left {
        display: flex;
        justify-content: center;
        align-items: start;
        width: 31.9148%;
    }
    .profile-right {
      width: 65.9574%;
    }
    p.profile-right {
        line-height: 2.6rem;
    }
    } */

/* 波型の背景 */
/* ここから上の波 */
/* ベース */
@media screen and (min-width: 768px) {

/* idとclassのskillを重ねて背景色を付ける */

.skill-background {
    position: relative;
    width: 100%;
    height: 0;/* 波型上部からh2までの余白 */
    background-color: #fefee3;
}
/* /idとclassのskillを重ねて背景色を付ける */

#skill {
    position: absolute;
    margin-top: -70px;
}
/* コンテンツ背景 */
.wave {
    background-color: #fefee3;
}

.skill-container {
    position: relative;
    width: 100%;
    padding-bottom: 0;
    margin-top: 0;
}
.skill-container::before {
    content: "";
    display: block;
    padding-top: 10%;
}
.wave-top {
    position: absolute;
    top: -12px;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url(../img/wave.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 10;
}

.skill-container-bottom {
    position: relative;
    z-index: 0;
    width: 100%;
    /* 画像を下に移動し波型が見えるように */
    top: 4rem;
}
.skill-container-bottom::after {
    content: "";
    display: block;
    padding-bottom: 10%;
}
.wave-bottom {
    position: absolute;
    top: -3;
    bottom: -38px;
    left: 0;
    right: 0;
    background-image: url(../img/wavebottom.png);
    background-repeat: no-repeat;
    background-size: cover;
}
/* /波型の背景 */
}
/*Work 制作物
--------------------*/

/* 導入部 */
#work h2 {
    margin-top: 20rem;
}
.work-lead {
    margin-top: 2rem;
    margin-bottom: 5rem;
    font-size: 1.6rem;
}

/* 擬似要素。見出しの上にあしらいを付ける */
h3::before {
    content: '';
    display: block;/* 前後に改行 */
    margin: 0 auto;
    margin-bottom: 0.2rem;
    margin-top: 2rem;
    width: 110px;
    height: 75px;
    background-image: url(../img/taiyou.svg);
    width: 83px;
    height: 39px;
    background-repeat: no-repeat;
    background-size: contain;/* 画像の縦横比は保持して指定サイズ内に収まるようにする */
    margin-bottom: 0.72rem;
}

h3 {
    font-size: 3.2rem;
    margin-bottom: 4.28rem;
}


/* 制作物ごとのレイアウト */
h4 {
    font-size: 2.2rem;
}

/* 制作物レスポンシブ */
@media screen and (min-width: 768px) {
    /*汎用2カラム,3カラム指定*/
    .work-pc-grid-col2 {
        max-width: 960px;
        margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
  }
    /*2カラムの列幅*/
    .work-pc-grid-col2 .work-col {
      width: 42.5531%;
    }
  }
/* /制作物レスポンシブ */

/* セクションごとの全体のレイアウト */

.work-section {
    width: 100%;
    margin: 0 auto;
}

.work-section p {
    font-size: 1.6rem;
}

/* 番号の画像を入れる */
.work-first::before {
    content: '';
    margin-right: 1.4rem;
    background-image: url(../img/1.svg);
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    background-size: contain;/* 画像の縦横比は保持して指定サイズ内に収まるようにする */
}
.work-second::before {
    content: '';
    margin-right: 1.4rem;
    background-image: url(../img/2.svg);
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    background-size: contain;/* 画像の縦横比は保持して指定サイズ内に収まるようにする */
}
.work-third::before {
    content: '';
    margin-right: 1.4rem;
    background-image: url(../img/3.svg);
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    background-size: contain;/* 画像の縦横比は保持して指定サイズ内に収まるようにする */
}
.work-four::before {
    content: '';
    margin-right: 1.4rem;
    background-image: url(../img/4.svg);
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    background-size: contain;/* 画像の縦横比は保持して指定サイズ内に収まるようにする */
}
.work-five::before {
    content: '';
    margin-right: 1.4rem;
    background-image: url(../img/5.svg);
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    background-size: contain;/* 画像の縦横比は保持して指定サイズ内に収まるようにする */
}
.work-six::before {
    content: '';
    margin-right: 1.4rem;
    background-image: url(../img/6.svg);
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    background-size: contain;/* 画像の縦横比は保持して指定サイズ内に収まるようにする */
}


/* h4と擬似要素を左寄せ */
.heading-work-inner {
    text-align: left;
}

/* 制作物の区分を右寄せにし、文字の前に線を引く */
.work-type {
    margin-bottom: 1.36rem;
    display: flex;
    align-items: center;
    /* flexbox内で右寄せにする */
    justify-content: flex-end;  
}
.work-type::before {
    border-top: 1px solid;
    content: '';
    width: 10rem;
    margin-right: 1.4rem;
}

/* 説明を右寄せ */
.work-summary {
    margin-bottom: 2.36rem;
    text-align: right;
    word-wrap: break-word;/* 折り返しの指定 はみ出る場合は単語の途中でも折り返す */
}


/* 詳しくはこちらを右寄せ */
.work-btn {
    margin-bottom: 4.36rem;
    display: flex;
    justify-content: flex-end;
}
/* 詳しくはこちらの下の矢印アイコン */
.btn-arrow{
    /*矢印と下線の基点とするためrelativeを指定*/
	position: relative;
    /*形状*/
    display: inline-block;
	padding: 0 20px;
    color: #333;
    text-decoration: none;
    outline: none;
}

/*矢印と下線の形状*/
.btn-arrow::before{
    content: '';
    /*絶対配置で下線の位置を決める*/
	position: absolute;
    bottom:-8px;
    left:15%;
    /*下線の形状*/    
    width: 85%;
    height: 1px;
	background:#333;
    /*アニメーションの指定*/
    transition: all .3s;
}

.btn-arrow::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
	position: absolute;
    bottom:-3px;
    right:0;
    /*矢印の形状*/    
    width: 15px;
    height:1px;
	background:#333;
    transform: rotate(35deg);
    /*アニメーションの指定*/
    transition: all .3s;
}

/*hoverした際の移動*/
.btn-arrow:hover::before{
    left:20%;
}

.btn-arrow:hover::after{
    right:-5%;
}
/* /詳しくはこちらの下の矢印アイコン */

/* モックアップ */


.work-mock img {
    margin-bottom: 1.36rem;
    display: inline-block;
    text-align: center;
    width: 90%;
}

/* モックの背景画像3種類 */
.work1 {
    background-image: url(../img/work-back-image-l.png);
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
}
.work2 {
    background-image: url(../img/work-back-image101.png);
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
}
.work3 {
    background-image: url(../img/work-back-image202.png);
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
}
/* /モックの背景画像3種類 */

/* /制作物ごとのレイアウト */


/*contact お問合せ
--------------------*/
.contact h2 {
    margin-top: 0;
}
.contact-lead {
    margin-top: 2.36rem;
    text-align: left;
}
.contact-lead-small {
    margin-top: 2.44rem;
    margin-bottom: 3rem;
    font-size: 1.4rem;
    text-align: left;
}

/* フォーム */

.contact {
    max-width: 960px;
    margin: 0 auto;
    /* 背景画像 */
    background-image:
    url(../img/lemon.png),/* 左画像 */
    url(../img/lemonade.png);/* 右画像 */
    
    background-position:
    left 0px top 65px,/* 左画像の位置 */
    right 0px bottom 180px;/* 右画像の位置 */

    /* 画像の設定 */
    background-repeat: no-repeat,no-repeat;

    /* 画像のサイズ */
    background-size: 50%, 60%;

}


input[type="text"], input[type="email"] {
    width: 100%;
    font-size: 1.6rem;
    border: 1px solid #162442;
    border-radius: 4px;
}

/* テキストと枠の間、枠と見出しの間に余白を設ける */
input[type="text"], input[type="email"] {
    margin-top: 0.64rem;
    margin-bottom: 1.64rem;
    padding: 1rem;
}

textarea {
    margin-top: 0.64rem;
    margin-bottom: 2.44rem;
    padding: 1rem;
    border: 1px solid #162442;
    width: 100%;
    height: 200px;
    font-size: 1.6rem;
    border-radius: 4px;
}


/* フォームの2カラム */
@media screen and (min-width: 768px) {
    /*汎用2カラム,3カラム指定*/
    .contact-pc-grid {
      margin-top: 4.0rem;
      margin-bottom: 5.0rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      text-align: left;
  }
    /*2カラムの列幅*/
    .contact-pc-grid .col {
      width: 48.9361%;
    }
    .col-left {
        padding-right: 2rem;
        /* 縦方向に中央・上寄せ */
        display: flex;
        flex-flow: column;
        justify-content: start;
        align-items: flex-end;
    }
    .col-right {
        padding-left: 2rem;
        /* 縦方向に中央・上寄せ */
        display: flex;
        justify-content: start;
        align-items: center;
    }
    input[type="text"], input[type="email"] {
        width: 400px;
        font-size: 1.6rem;
        border: 1px solid #162442;
        border-radius: 4px;
    }
    
    /* テキストと枠の間、枠と見出しの間に余白を設ける */
    input[type="text"], input[type="email"] {
        margin-top: 0.64rem;
        margin-bottom: 1.64rem;
        padding: 1rem;
    }
    
    textarea {
        margin-top: 0.64rem;
        padding: 1rem;
        border: 1px solid #162442;
        width: 400px;
        height: 200px;
        font-size: 1.6rem;
        border-radius: 4px;
    }

    .contact {
        /* 背景画像 */
        background-image:
        url(../img/lemon.png),/* 左画像 */
        url(../img/lemonade.png);/* 右画像 */
       
        background-position:
        left 0px top 65px,/* 左画像の位置 */
        right -30px bottom;/* 右画像の位置 */

        /* 画像の設定 */
        background-repeat: no-repeat,no-repeat;
    
        /* 画像のサイズ */
        background-size: 248px,300px;
    }
    .contact-lead {
        text-align: center;
    }
    .contact-lead-small {
        text-align: center;
    }
  }
/* /フォームの2カラム */



/* 入力チェックで引っかかった時のスタイル */
input:required,
input[type="email"]:invalid {
    background:#ffb3b3;
}
input[type="text"]:valid,
input[type="email"]:valid,
input[type="massage"]:valid {
    background: #fff;
}
/* /入力チェックで引っかかった時のスタイル */


/* 送信ボタン */
/*その他と主な共通部分は省略*/
input[type="submit"] {
    border: none;
    background: #c9d3c9;
    background: -webkit-gradient(linear, left top, left bottom, from(#F9F871), to(#81D87E));
    background: -webkit-linear-gradient(top, #F9F871 0%, #81D87E 100%);
    background: linear-gradient(to bottom, #F9F871 0%, #81D87E 100%);
    padding: 1rem 8rem 1rem 8rem;
    -webkit-box-shadow:
    0 5px 5px rgba(0, 0, 0, 0.2);
    box-shadow:
    0 5px 5px rgba(0, 0, 0, 0.2);
    font-size: 1.6rem;
    letter-spacing: 1.6rem;
    text-indent: 1.6rem;
    width:244px;
    height:47px;
}
input[type="submit"]:hover {
    background: -webkit-gradient(linear, left bottom, left top, from(#F9F871), to(#81D87E));
    background: -webkit-linear-gradient(bottom, #F9F871 0%, #81D87E 100%);
    background: linear-gradient(to top, #F9F871 0%, #81D87E 100%);
    transition: all .3s;
    color: #81D87E;
    /* hoverした時ポインターを手のひらに */
    cursor: pointer;
}

/* /送信ボタン */
/* /フォーム */


/*footer
--------------------*/
footer {
    background: linear-gradient(#474c88, #162442);
    max-width: 100%;
    height: auto;
}

.footer-container {
    max-width: 960px;
    margin: 0 auto;
    margin-top: 5rem;
    display: flex;
    justify-content: center;
}

.container-footer {
    max-width: 100%;
    height: auto;
    background-size: cover;
}

.sns-flex {
    margin-top: 2rem;
    width: 360px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    color: #fff;
    font-size: 1.2rem;
}
.sns-flex img {
}

.twitter-icon,.instagram-icon {
    padding-top: 0.8rem;
}


.copyright {
    font-size: 1.6rem;
    margin-top: 3.36rem;
    padding-bottom: 2.36rem;
    color: #fff;
    text-align: center;
}
/* font-6.4 */



/*copyright*/

/*
=========================================
    Modules（Parts）
=========================================
*/

/*Heading
--------------------*/

/*
=========================================
    Utilities
=========================================
*/

/* マージン
---------------------------------*/

/* 左右行揃え
---------------------------------*/


/*
=========================================
    Javascript用CSS
=========================================
*/
/* ナビゲーションを最初は非表示。 */
#js-slidemenu {
	display: none;
}
/* パソコン向けではナビゲーションを常に表示 */
@media screen and (min-width: 768px) {
	#js-slidemenu {
		display: block !important; 
	}
}
/* ナビゲーションが開いたときに画面を暗くする処理のためのCSS */
.js-slidemenu-effect {
	width: 100%;
	height: 100%;
	background: #162442;
	opacity: 0.4;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}