@charset "utf-8";

/*スマートフォン：見出し28px本文14px --ブレークポイント600px-- タブレット：見出し32px本文16px --ブレークポイント960px-- PC：見出し36px本文18px*/

/*基本設定：フォントサイズ*/
/*スマホ：600以下*/
@media (max-width: 599px){
    :root{
        font-size: 14px;
    }
}

/*タブレット：600～960px*/
@media (min-width: 600px) and (max-width: 959px){
    :root{
        font-size: 16px;
    }
}

/*PC：960以上*/
@media (min-width: 960px){
    :root{
        font-size: 18px;
    }
}

body{
    font-size: 16px;
} /*のちに.postのh1とpのみ、rootに応じて文字サイズが変わるように設定している。ここでは、ほかのフォントサイズはブラウザ標準の16pxになるように設定*/

/*基本設定：ページ全体*/
body {
    margin: 0; /*bodyのデフォルトCSSマージン8px（ウィンドウ外周）を削除*/
    font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
}

/*ヘッダーA：サイト名*/
header{
    position: absolute; /*ヘッダーは別レイヤーとなり、指定なしの要素の上に重なる。自由に配置できるようになる*/
    top: 0;/*ブラウザ画面の左上に表示するためtopとleftを設定*/
    left: 0;
    z-index: 100; /*重なり方の順序を指定。数字の大きいものが上*/
    width: 100%; /*広がるように*/
}

header h1{
    display: inline-block;
    padding: 8px;
}

header h1 img{
    vertical-align: middle;
    height: 48px;
}

header h1 a:hover {
  opacity: 0.8;
}

/*ヘッダーB：ナビゲーションメニュー*/
/*PCのスタイル*/
header .headB {
    margin-right: -16px;
}

header .headB ul{
    display: flex;
}

header .headB ul li a{
    color: #fff; /*PC版ナビゲーション文字色*/
    text-decoration: none;
    margin: 16px;
    padding: 4px;
    font-weight: bold;
    font-size: 16px;
    font-family: 'Raleway', sans-serif;
    letter-spacing: 0.1em;
    
    display: inline-block;
    position: relative;
}

@media (min-width: 768px){ /*ナビゲーションの下線はPCのみで適用*/
header .headB ul li a::after {
position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background-color: #fff; /*下線の色*/
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}

header .headB ul li a:hover::after {
    transform: scale(1, 1);
}
}

@media (max-width: 767px){
    header .headB ul li a:hover{
        opacity: 0.8;
    }
}

#nav_toggle{
    display: none;
}

/*スマホ用の設定*/
@media (max-width: 767px){
    
header h1{
    position: fixed;
    top: 0;
    left: 0;
    }

header #nav_toggle{
    padding: 0;
    cursor: pointer;
    
    position: fixed;
    top: 16px;
    right: 16px;
    }

header .small-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header .headB{
    display: none;
    }
}

/*PC用の設定*/
@media (min-width: 768px){
header .headB{
    display: block !important;
    }/*スマホ用では非表示にされているメニュー表示が、PC用で消えないようにする*/
}

/*メニュー部分*/
@media screen and (max-width: 767px){
header .headB{
    display: none;
    position: fixed; /*追従*/
    top:0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255,255,255,0.6);
}

header .headBcon{ /*メニュー内部も追従させるための処理*/
    display: flex;
    }
    
header .headB ul{
    display: block;
    width: 90%;
    height: 350px;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: auto;
    }
    
header .headB ul li{
        margin: 0 auto;
        text-align: center;
    }
    
header .headB ul li:last-child{
        border: none;
    }
    
header .headB ul li a{
        display: block;
        color: #3F51B5; /*文字色*/
        font-size: 32px;
        font-family: 'Raleway', sans-serif;
        letter-spacing: 0.1em;
    }
}

@media (min-width: 768px){
    header .container{
        display: flex; /*タイトルとナビゲーションを横並びにする*/
        align-items: center; /*垂直方向で中央揃え。要素全体の中央を基準として並べる*/
        justify-content: space-between; /*タイトルとナビゲーションを横並びにし、両端揃えをする。最初の要素を始点に、最後の要素を終点に配置*/
        max-width: 960px;
        margin-left: auto; /*leftとrightでセンタリング*/
        margin-right: auto;
    }
    .headB ul{
        display: flex; /*PC用だとnavが横並びになる*/
    }
}

/* ハンバーガーメニュー*/
@media screen and (max-width: 767px){
/*開閉ボタン*/
	#nav_toggle{
		display: block;
		width: 40px;
		height: 40px;
		position: relative;
		top: 4px;
		z-index: 100;
	}
	#nav_toggle div {
		position: relative;
	}
	#nav_toggle span{
		display: block;
		height: 3px;
		background: #fff;
		position:absolute;
		width: 100%;
		left: 0;
		-webkit-transition: 0.5s ease-in-out;
		-moz-transition: 0.5s ease-in-out;
		transition: 0.5s ease-in-out;
	}
	#nav_toggle span:nth-child(1){
		top:0px;
	}
	#nav_toggle span:nth-child(2){
		top:12px;
	}
	#nav_toggle span:nth-child(3){
		top:24px;
	}
	
	/*開閉ボタンopen時*/
	.open #nav_toggle span:nth-child(1) {
			top: 12px;
		   -webkit-transform: rotate(135deg);
			-moz-transform: rotate(135deg);
			transform: rotate(135deg);
		}
		.open #nav_toggle span:nth-child(2) {
			width: 0;
			left: 50%;
		}
		.open #nav_toggle span:nth-child(3) {
			top: 12px;
			-webkit-transform: rotate(-135deg);
			-moz-transform: rotate(-135deg);
			transform: rotate(-135deg);
		}
}

/*コンテンツA: HOME*/
.conA{
    background-color: #1A237E;
    
    display: flex; /*flexアイテムにする*/
    align-items: center; /* align-items（上下方向の配置）とjustify-content（左右方向の配置）で親要素(conA）中央に配置される*/
    justify-content: center;
    min-height: 450px; /*画像の高さがこれ以上なくならない。450pxの高さを確保する*/
    color: #fff; /*CSS変数に未対応のブラウザのため*/
    text-align: center; /*文字をセンタリング*/
    height: 80vh; /*画面いっぱいに表示。vhは画面の高さを100vhとして処理*/
}

.conA h2{
    margin-top: 0; /*デフォルトのマージンを消す*/
    margin-bottom: 10px; /*下のpとくっつかないようにする*/
    font-family: 'Abril Fatface', cursive;
    font-weight: 500;
    font-size: 5vw; /*画面の横幅に合わせて文字サイズを変化させる単位：vw*/
    letter-spacing: 0.2em; /*文字間を空ける。各文字の右側に余白が挿入される*/
    margin-left: 0.2em; /*文字のセンタリング。中央揃えにするため、1文字目の左側に0.2emの余白を挿入*/
}

.conA p{
    margin-top: 0;
    margin-bottom: 0;
    font-family: 'Abril Fatface', cursive;
    font-weight: normal;
    font-size: 20px;
    letter-spacing: 0.1em;
}

.conA img{
    width: 50%; /*親要素の横幅に対し20%のサイズ。高さは縦横比を維持した形で、自動的に調整される。*/
}

@media (min-width: 768px){ /*横幅768以上のとき最大115pxで固定*/
    .conA h2{
        font-size: 40px;
    }
    .conA p{
        font-size: 24px;
    }
}

/*コンテンツB: CONCEPT*/

.conB{
/*    background-color: #BDBDBD;*/
    background-color: #cccccc;
    color: #212121;
}

.conB .container{
    padding-top: 48px;
    padding-bottom: 32px;
    padding-left: 16px;
    padding-right: 16px;
    text-align: center; /*全体をグループ化したdivに、text-align:center。アイコン、見出し、文章、リンクを中央揃え*/
}

.conB.text{ /*スマホ用*/
    padding: 20px;
}

.conB h2{
    margin-top: 0;
    margin-bottom: 10px;
    font-family: 'Raleway', sans-serif;
    font-size: 20px; /*18検討*/
    letter-spacing: 0.1em;
    color: #fff;
}

.conB h3{ /*キャッチコピー*/
    margin: 0;
    padding: 16px;
    line-height: 1.7; /*行高は1.7*/
    min-height: 80px;
    
    font-size: 24px;
    text-align: left;
    font-family: 'Noto Sans JP', sans-serif;
    color: rgba(48, 63, 159, 0.87); /*#303F9F;*/
}

.conB p{
    margin: 0;
    padding: 16px;
    font-size: 14px;
    line-height: 1.7; /*行高は1.7*/
    text-align: left;
    font-family: 'Noto Sans JP', sans-serif;
    color: rgba(0, 0, 0, 0.87);
}

@media screen and (max-width: 767px){ /*スマートフォンのとき*/
    .conB h3{
        font-size: 24px;
        text-align: center;
    }
}


@media (min-width: 768px) { /*横幅768以上（パソコン画面）のとき*/
    .conB .conBitem{ /*photoとtextを横並びに。display:flexは、photoとtextの親要素であるcontainerに書く*/
        display: flex;
        max-width: 960px;
        margin-left: auto; /*左右のマージンをautoにすることで中央寄せにする*/
        margin-right: auto;
    }
    .conB h3{ /*photo:textを3:2。flexアイテムは子要素に書く*/
        flex:3;
    }
    .conB p{
        flex:2;
        padding: 50px; /*ブラウザとくっつかないように、paddingで内余白*/
    }
}

/*コンテンツC: WORKS*/

.conC{
/*    background-color: #C5CAE9;*/
    background-color: #dce1ee;
}

.conC .container{
    padding-top: 48px; /*広めにとるが後で修正も検討*/
    padding-bottom: 32px; /*ブラウザのエッジ（ブラウザの外枠のこと？）とくっつかないようにpaddingで調整する*/
    padding-left: 16px; /*3つの要素のスペースpaddingでを調整*/
    padding-right: 16px;
    text-align: center; /*全体をグループ化したdivに、text-align:center。アイコン、見出し、文章、リンクを中央揃え*/
}

.conC .works-list{
    margin: 0;
    padding: 0;
}

.conC .works-contents{
    margin-top: 48px;
    margin-bottom: 40px;
    list-style-type: none;
}

.works-contents img{
    border-radius: 7px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}

.works-contents img:hover{
    box-shadow: 0 4px 10px rgba(0,0,0,.2)
}

.conC h2{
    margin-top: 0;
    margin-bottom: 10px;
    font-family: 'Raleway', sans-serif;
    font-size: 20px; /*18検討*/
    letter-spacing: 0.1em;
    color: #fff;
}

.conC h3{
    margin-top: 16px;
    margin-bottom: 8px;
    font-size: 14px;
    font-family: 'Noto Sans JP', sans-serif;
}

.conC p{
    margin-top: 0px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.6;
}

.conC .works-sub{
    color: rgba(48, 63, 159, 0.54); /*#303F9F;*/
    font-family: 'Noto Sans JP', sans-serif;
}

.works-contents a{
    color: rgba(48, 63, 159, 0.87); /*#303F9F;*/
    text-decoration: none;
}

@media (min-width: 768px) { /*横幅768以上（パソコン画面）のとき*/
    .conC .works-list{ /*textの直近の親要素*/
        display: flex; /*横幅768以上のとき、3つの要素を横並びに設定。モバイルファーストのため、元々は縦並びに設定されている*/
        max-width: 960px;
        margin-left: auto; /*左右のマージンをautoにすることで中央寄せにする*/
        margin-right: auto;
    }
    .conC .works-contents{
        flex: 1;/*親要素を等分割して横幅で並べる。flex:1 1 0;の意味*/
    }
}

/*コンテンツE: PROFILE*/

.conE{
    background-color: #cccccc;
    color: #212121;
}

.conE .container{
    padding-top: 48px; /*広めにとるが後で修正も検討*/
    padding-bottom: 80px;
    padding-left: 16px; /*3つの要素のスペースpaddingでを調整*/
    padding-right: 16px;
    text-align: center; /*全体をグループ化したdivに、text-align:center。アイコン、見出し、文章、リンクを中央揃え*/
}

.conE h2{
    margin-top: 0;
    margin-bottom: 10px;
    font-family: 'Raleway', sans-serif;
    font-size: 20px; /*18検討*/
    letter-spacing: 0.1em;
    color: #fff;
}

.conE h3{
    margin: 0;
    padding-bottom: 8px;
    font-size: 16px;
    font-family: 'Raleway', 'Noto Sans JP', sans-serif;
    letter-spacing: 0.1em;
    color: rgba(48, 63, 159, 0.87); /*#303F9F;*/
}

.conE .nobreak{ /*名前をキリのいいところで改行させる*/
    display:inline-block;
}

.conE p{
    margin-top: 0;
    margin-bottom: 0;
    padding: 16px;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
    font-family: 'Noto Sans JP', sans-serif;
    color: rgba(0, 0, 0, 0.87);
}

.conE .photo img{
    border-radius: 7px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}

.conE .text{
    margin: 0;
    padding: 0;
}

@media screen and (max-width: 767px){/*スマホ用*/
    .conE .photo{
    margin-top: 40px;
    }
    .conE h3{
    margin-top: 32px;
    }
    .conE .links{
    margin-top: 32px;
    }
}

@media (min-width: 768px) { /*横幅768以上（パソコン画面）のとき*/
    .conE .conEitem{ /*photoとtextを横並びに。display:flexは、photoとtextの親要素であるcontainerに書く*/
        display: flex;
        max-width: 960px;
        margin-top: 32px;
        margin-left: auto; /*左右のマージンをautoにすることで中央寄せにする*/
        margin-right: auto;
    }
    .conE .photo{ /*photo:textを3:2。flexアイテムは子要素に書く*/
        display: inline-block;
        flex: 2;
        margin: auto;
    }
    .conE h3{
    text-align: left;
    padding-top: 16px;
    padding-bottom: 0;
    padding-left: 16px;
    padding-right: 16px;
    }
    .conE .text{
        flex: 3;
        padding: 0;
    }
    .conE p{
    text-align: left;
    }

    .conE .links{
    display: flex;
    max-width: 960px;
    margin-top: 32px;
    margin-left: auto;
    margin-right: auto;
    }
    .conE .bannar{
    flex: 1;
    }
}

/* AWARD */

.conE .awards{
    margin-top: 0;
    margin-bottom: 0;
    padding: 16px;
    font-family: 'Raleway', sans-serif;
    letter-spacing: 0.1em;
    text-align: right;
}

.conE .awards a{
    /*padding-top: 4px;
    padding-bottom: 4px;*/
    color: #EC407A;
    font-size: 16px;
    text-decoration: none;
}

.conE .awards a:hover{
    opacity: 0.6;
}

/*VIEW MORE ボタン*/

.conE .works-view{
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    font-family: 'Raleway', sans-serif;
    letter-spacing: 0.1em;
    text-align: right;
}

.conE .works-view a{
    padding-top: 4px;
    padding-bottom: 4px;
    color: #EC407A;
    font-size: 16px;
    text-decoration: none;
}

.conE .works-view a:hover{
    letter-spacing: 0.4em;
}

.conE .works-view a {
  position: relative;
  display: inline-block;
  transition: .3s;
}

.conE .works-view a::before,
.conE .works-view a::after {
  position: absolute;
  left: 50%;
  content: '';
  width: 0px;
  height: 2px;
  background-color: #EC407A;
  transition: .3s;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.conE .works-view a::before {
  top: 0;
}
.conE .works-view a::after {
  bottom: 0;
}
.conE .works-view a:hover::before,
.conE .works-view a:hover::after {
  width: 100%;
}

/*バナー*/

.conE .bannar{
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 12px;
}


/*フッター*/
footer{
    padding-top: 16px;
    padding-bottom: 16px;
    background-color: #1A237E;
    color: #fff;
    font-size: 12px;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;

    position: absolute;  /* フッターを絶対配置に指定する設定 */
    bottom: 0;           /* フッターを一番下に置く*/
    width: 100%;
}

/* WORKSページ */

.conC-more{
/*    background-color: #C5CAE9;*/
    background-color: #dce1ee;
}

.conC-more .container{
    padding-top: 64px; /*広めにとるが後で修正も検討*/
    padding-bottom: 64px; /*ブラウザのエッジ（ブラウザの外枠のこと？）とくっつかないようにpaddingで調整する*/
    padding-left: 16px; /*3つの要素のスペースpaddingでを調整*/
    padding-right: 16px;
    text-align: center; /*全体をグループ化したdivに、text-align:center。アイコン、見出し、文章、リンクを中央揃え*/
}

.conC-more .w-list{
    margin: 0;
    padding: 0;
}

.conC-more .w-contents{
    margin-top: 48px;
    margin-bottom: 40px;
    list-style-type: none;
}

.w-contents img{
    border-radius: 7px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}

.w-contents img:hover{
    box-shadow: 0 4px 10px rgba(0,0,0,.2)
}

.conC-more h2{
    margin-top: 8px;
    margin-bottom: 32px;
    font-family: 'Raleway', sans-serif;
    font-size: 20px; /*18検討*/
    letter-spacing: 0.1em;
    color: #fff;
}

.conC-more h3{
    margin-top: 16px;
    margin-bottom: 4px;
    font-size: 14px;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.6;
}

.conC-more .w-sub{
    margin-top: 0px;
    margin-bottom: 8px;
    font-size: 14px;
    color: rgba(48, 63, 159, 0.54); /*#303F9F;*/
    font-family: 'Noto Sans JP', sans-serif;
}

.w-contents a{
    color: rgba(48, 63, 159, 0.87); /*#303F9F;*/
    text-decoration: none;
}

@media (min-width: 768px) { /*横幅768以上（パソコン画面）のとき*/
    .conC-more .w-list{ /*w-contentsの直近の親要素*/
        max-width: 960px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: auto;
        margin-right: auto;
    }
    .conC-more .w-contents{
        width: calc(33.3% - 10px);
        margin-top: 0;
        margin-bottom: 24px;
        margin-right: 4px;
        margin-left: 4px;
    }
}

/*WORKS 個別ページ*/
.conW{
/*    background-color: #C5CAE9;*/
    background-color: #dce1ee;
}

.conW .containerW{
    padding-top: 64px; /*広めにとるが後で修正も検討*/
    padding-bottom: 64px; /*ブラウザのエッジ（ブラウザの外枠のこと？）とくっつかないようにpaddingで調整する*/
    padding-left: 16px; /*3つの要素のスペースpaddingでを調整*/
    padding-right: 16px;
    text-align: center; /*全体をグループ化したdivに、text-align:center。アイコン、見出し、文章、リンクを中央揃え*/
}

.conW h2{
    margin-top: 8px;
    margin-bottom: 32px;
    font-family: 'Raleway', sans-serif;
    font-size: 20px; /*18検討*/
    letter-spacing: 0.1em;
    color: #fff;
}

.conW h3{
    margin-top: 0px;
    margin-bottom: 4px;
    font-size: 16px;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.6;
    color: rgba(48, 63, 159, 0.87);
    letter-spacing: 0.04em;
}

.conW h4{
    font-size: 14px;
    font-family: 'Noto Sans JP', sans-serif;
    color: rgba(48, 63, 159, 0.54); /*#303F9F;*/
    letter-spacing: 0.06em;
}

.conW h5{
    font-size: 14px;
    font-family: 'Noto Sans JP', sans-serif;
    color: rgba(0, 0, 0, 0.54);
    letter-spacing: 0.06em;
    text-align: left;
    line-height: 1.6;
}
.conWtext{
    margin-top: 32px;
    margin-bottom: 24px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 8px;
    padding-right: 8px;
}

.conW p{
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 14px;
    text-align: left;
    line-height: 1.6;
    font-family: 'Noto Sans JP', sans-serif;
    color: rgba(0, 0, 0, 0.87);
}

/*noteへのリンク*/
.conW .a-tonote{
    text-decoration: none;
    color: rgba(48, 63, 159, 0.54); /*#303F9F;*/
}

.conW a{
    text-decoration: none;
    color: rgba(48, 63, 159, 0.87); /*#303F9F;*/
}

.conW .works-pre a{
    text-decoration: none;
    color: #fff;
}

.conW a:hover{
    opacity: 0.6;
}

.conW .br-wrap{
    margin-top: 0;
    margin-bottom: 16px;
}

.conW .h5-wrap{
    margin-top: 24px;
}

@media (min-width: 768px) { /*横幅768以上（パソコン画面）のとき*/
    .containerW{
        max-width: 960px;
        margin-left: auto; /*左右のマージンをautoにすることで中央寄せにする*/
        margin-right: auto;
    }
}

/*コンテンツが足りないときにフッターが浮かないための処理*/

html, body{
    margin:0;
    padding:0;
    height: 100%; /*ブラウザいっぱいに高さを取得*/
}

#footer-container{
    width: 100%;
    position: relative;
    height: auto !important;
    height: 100%;
    min-height: 100%;
/*    background-color: #C5CAE9;*/
    background-color: #dce1ee;
}

/*TOPページのブログタイトルを改行させる処理*/
.conD .nobreak{ /*名前をキリのいいところで改行させる*/
    display:inline-block;
}

/*エラーページ*/
#error-container{
    width: 100%;
    position: relative;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    background-color: #cccccc;
}

.p-error{
    background-color: #cccccc;
    color: #fff;
}

.p-error .container{
    padding-top: 64px;
    padding-bottom: 24px;
    padding-left: 16px;
    padding-right: 16px;
    text-align: center;
}

.p-error h2{
    margin-top: 64px; /*0にする*/
    margin-bottom: 8px; /*10にする*/
    font-family: 'Abril Fatface', cursive;
    font-size: 40px; /*18検討*/
    letter-spacing: 0.1em;
    color: rgba(48, 63, 159, 0.87);
}

.p-error h3{
    margin-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
    line-height: 1.4;
    font-size: 20px;
    font-family: 'Noto Sans JP', sans-serif;
    color: rgba(48, 63, 159, 0.54); /*#303F9F;*/
    letter-spacing: 0.06em;
}

.p-error p{
    margin-top: 24px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.6;
    font-family: 'Noto Sans JP', sans-serif;
    color: rgba(0, 0, 0, 0.87);
}

/*送信完了ページ*/
#comp-container{
    width: 100%;
    position: relative;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    background-color: #cccccc;
}

.p-comp{
    background-color: #cccccc;
    color: #fff;
}

.p-comp .container{
    padding-top: 64px;
    padding-bottom: 24px;
    padding-left: 16px;
    padding-right: 16px;
    text-align: center;
}

.p-comp h2{
    margin-top: 64px; /*0にする*/
    margin-bottom: 8px; /*10にする*/
    font-family: 'Abril Fatface', cursive;
    font-size: 40px; /*18検討*/
    letter-spacing: 0.1em;
    color: rgba(48, 63, 159, 0.87);
}

.p-comp h3{
    margin-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
    line-height: 1.4;
    font-size: 20px;
    font-family: 'Noto Sans JP', sans-serif;
    color: rgba(48, 63, 159, 0.54); /*#303F9F;*/
    letter-spacing: 0.06em;
}

.p-comp p{
    margin-top: 24px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.6;
    font-family: 'Noto Sans JP', sans-serif;
    color: rgba(0, 0, 0, 0.87);
}