@charset "utf-8";

/************************************************
■フォント
*************************************************/
@font-face {
    font-family:'roboto_l';
    src: url('/fonts/Roboto-Light.woff') format('woff');
}
@font-face {
    font-family:'roboto_m';
    src: url('/fonts/Roboto-Medium.woff') format('woff');
}
@font-face {
    font-family:'roboto_r';
    src: url('/fonts/Roboto-Regular.woff') format('woff');
}
@font-face {
    font-family:'roboto_b';
    src: url('/fonts/Roboto-Bold.woff') format('woff');
}
@font-face {
    font-family:'Sohne_h';
    src: url('/fonts/TestSohne-Halbfett.woff') format('woff');
}
@font-face {
    font-family:'Sohne_k';
    src: url('/fonts/TestSohne-Kraftig.woff') format('woff');
}
/*
font-family: "FP-ヒラギノ角ゴ ProN W3";
font-family: "FP-ヒラギノ角ゴ ProN W6";
font-family: "FP-ヒラギノ角ゴ ProN W5";
*/

/************************************************
■基本レイアウト
*************************************************/
html {
    min-width:1000px;
    height:100%;
}
body {
    font-family:FP-HiraKakuProN-W4;
    letter-spacing: 0.03em;
/*
    letter-spacing: 0.02em;
    font-family: Helvetica, "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif;
	  -webkit-text-size-adjust: none;
	  -webkit-font-smoothing: antialiased;
*/
    font-size:15px;
    background-color:#FFF;
    height:100%;
    color:#000;
    position:relative;
}
body.no_scroll{
   overflow: hidden;
}

/************************************************
■ヘッダ
*************************************************/
header {
    padding:1em;
    width:calc(100% - 2em);
}
header.type_gray {
    background:#F5F5F7;
    background:#DDD9D9;
    height:auto;
}
header.type_home nav {
    margin-bottom:5em;
}

header nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    margin-bottom:8em;
}
header nav div:nth-child(1){
	justify-self:start;
}
header nav div:nth-child(2){
	justify-self:center;
}
header nav div:nth-child(3){
	justify-self:end;
}

/*ロゴ*/
.logo {
    user-select: none;
}
.logo a {
    color:#000;
    user-select: none;
    text-decoration:none;
}
.logo h3 {
    font-family:'Sohne_h';
    font-size:2em;
    font-weight:400;

    /*color:#525056;*/
    line-height:1em;
    letter-spacing:0.03em;
}
.logo p {
    font-family:'roboto_m';
    font-weight:400;

    line-height:1em;
    margin-top:0.6em;
    /*color:#AAA8AF;*/
    letter-spacing:0.2em;
}
footer .logo p {
    margin-top:0;
    margin-bottom:0.5em;
}


nav .center,
nav .right {
    color:#525056;
    font-family:'Sohne_h';
    font-size:1.5em;
    font-weight:400;
    transition: all .2s ease;
}
nav a {
    letter-spacing:0.1em;
    color:#000;
    user-select: none;
    text-decoration:none;
}
nav a::after {
    content:"";
    display:block;
    width:0;
    transition: all .2s;
    border-bottom:#000 2px solid;
}
nav a:hover::after {
    width:100%;
    border-bottom:#000 2px solid;
}
nav span {
    letter-spacing:0.1em;
    color:#AAA8AF;
    user-select: none;
    text-decoration:none;
}
    header.type_gray nav span {
        color:#C9C0C0;
        color:#BCB3B3;
    }

/*ロゴは線アニメ除外*/
.logo a::after {
    content:"";
    display:block;
    width:0;
    transition: all .2s;
    border-bottom:none;
}
.logo a:hover::after {
    border-bottom:none;
}
.logo a {
    transition: all .3s;
}
.logo a:hover {
    color:#969599;
}


/*■タイトル*/
header .title {
    display: grid;
    grid-template-columns:1fr 4em 1fr;
    grid-template-rows: auto;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
header .title div:nth-child(1){
	justify-self:start;
	align-self:end;
}
header .title div:nth-child(2){
	justify-self:center;
	align-self:end;
}
header .title div:nth-child(3){
	justify-self:end;
	align-self:end;
}
header .title h1 {
    font-family:'Sohne_h';
    font-size:3.4em;
    font-weight:400;

    /*color:#525056;*/
    line-height:1em;
    letter-spacing:0.05em;
}

body.type_project .title h1 {
    font-family: "FP-ヒラギノ角ゴ ProN W6";
    font-weight:700;
   /* 
    font-family: "FP-ヒラギノ角ゴ ProN W3";
    font-weight:400;
    */
    font-size:2.8em;
    line-height:1.2;
}
header .title .center p {
    font-family:'roboto_m';
    font-size:1.8em;
    font-weight:400;

    line-height:1em;
    margin-bottom:0.4em;
    color:#AAA8AF;
    letter-spacing:0.1em;
}
    header.type_gray .title .center p {
        color:#C9C0C0;
        color:#BCB3B3;
    }

header .title .right p {
    font-family: "FP-ヒラギノ角ゴ ProN W3";
    font-size:1.1em;
    font-weight:400;
     color:#AAA8AF;
    line-height:1.6;
    letter-spacing:0.03em;
    text-align:right;
}



/************************************************
■コンテンツ
*************************************************/
.contents {
}
body.type_about .contents {
}

/*列のコンテナ*/
.grids {
    margin:4em;
    margin-bottom:6em;

    display: grid;
    grid-template-rows: auto;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

/*列のコンテナ 3列*/
.grids.line3 {
    margin:2em;
    padding-bottom:5em;
    grid-template-columns: repeat(3, 1fr);
}
.grids.line3 div:nth-child(1){
	justify-self:start;
}
.grids.line3 div:nth-child(2){
	justify-self:center;
}
.grids.line3 div:nth-child(3){
	justify-self:end;
}

/*列のコンテナ 2列*/
.grids.line2 {
    margin:2em;
    padding-bottom:2em;
    grid-template-columns: repeat(2, 1fr);
    justify-items: start;/*コンテンツを中央へ*/
}
.grids.line3 div:nth-child(1){
	justify-self:start;
}
.grids.line3 div:nth-child(2){
    
	justify-self:center;
}
.grids.line3 div:nth-child(3){
	justify-self:end;
}

.grids .unit dt {
    padding-bottom:0.5em;
}
.grids .unit dt .label {
    font-family:'roboto_m';
    font-size:1.2em;
    font-weight:400;

    line-height:1em;
    margin-bottom:0.4em;
    letter-spacing:0.08em;
    color:#AAA8AF;
    color:#C9C0C0;
    color:#BCB3B3;
}
.grids .unit .myname {
    font-family:'Sohne_h';
    font-size:2.2em;
    font-weight:400;

    /*color:#525056;*/
    line-height:1em;
    letter-spacing:0.03em;
}
.grids .unit .text {
    font-family: "FP-ヒラギノ角ゴ ProN W3";
    font-size:1em;
    font-weight:400;
    color:#525056;
    line-height:2;
    letter-spacing:0.03em;
}

/*コンテンツ内イメージ画像*/
.img_full {
    overflow:hidden;
    height:90vh;
    display: grid;
    place-content: center;
}

.img_full img {
    width:100%;
    height:auto;
}

/*年表*/
.history > li {
    margin-bottom:0.3em;
}
.history_unit {
    display: grid;
    grid-template-columns:4em 1fr;
    grid-template-rows: auto;
    grid-column-gap: 1em;
    font-family: "FP-ヒラギノ角ゴ ProN W3";
    font-size:1em;
    font-weight:400;
}
.grids p.history_end {
    color:#000;
    font-family: "FP-ヒラギノ角ゴ ProN W3";
    font-size:1em;
    font-weight:400;
}

/************************************************
■フッタ
*************************************************/
footer {
    overflow:hidden;
    padding:5em 1em 1em;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
footer div:nth-child(1){
	justify-self:start;
	align-self:end;
}
footer div:nth-child(2){
	justify-self:center;
	align-self:end;
}
footer div:nth-child(3){
	justify-self:end;
	align-self:end;
}


footer .logo p {
    font-size:0.7em;
}
footer .logo h3 {
    font-size:1.2em;
    margin-bottom:0.3em;
}

footer .copyright {
    font-size:0.8em;
    font-family:'roboto_m';
    font-weight:400;

    line-height:1em;
    margin-bottom:0.4em;
    color:#AAA8AF;
    letter-spacing:0.2em;
}


/*ボタン共通*/
.btn {
    background:#F2F2F2;
    padding:2em;
    border-radius:2em;
    cursor:pointer;
    transition: all .4s ease;
    user-select: none;
}
.btn:hover {
    background:#E5E5E5;
}

/*上部へ戻るボタン*/
footer .btn.fortop {
    margin-bottom:-4.5em;
    padding:2em 2.5em 4em;
}
footer .fortop img {
    width:2em;
    height:auto;
}

/*上部へ戻るボタン（パララックス用）*/
footer.type_parallax {
    padding:4em 2em 1em;
}
footer.type_parallax .btn.fortop {
    margin-top:0em;
    padding:0 0 2em;
}
footer.type_parallax .btn.fortop a {
    display:block;
    margin-bottom:0;
    padding:2em 2.5em 4em;
}

/************************************************
■トップのプロジェクトコンテナ
*************************************************/
.next {
    position:relative;
    height:28rem;
    overflow:hidden;
}
.next > a {
    display:block;
    height:100%;
}
.next > a:hover .next_visual  {
    transform: scale(1.02);
    /*margin-top:-1.5em;*/
}
.next > a:hover .next_title h3 {
    text-shadow:rgba(0,0,0,0.4) 0px 1px 3px;
}

/*画像単体*/
.next_visual {
    position:absolute;
    right:2em;
    top:2em;
    transition: all .2s ease;
}
.next_visual img {
    width:60vw;
    box-shadow:rgba(0,0,0,0.15) 5px 10px 30px;
}

/*画像横並び 小＋大*/
.next_visual.type_2a {
    width:60vw;
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
.next_visual.type_2a img:nth-child(1){
	justify-self:start;
	align-self:start;
	width:9.5vw;
}
.next_visual.type_2a img:nth-child(2){
	justify-self:end;
	align-self:start;
	width:47vw;
}

/*画像横並び 3枚*/
.next_visual.type_3 {
    width:60vw;
    position:absolute;
    right:4em;
    top:4em;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
.next_visual.type_3 img:nth-child(1){
	justify-self:start;
	align-self:start;
	width:19vw;
}
.next_visual.type_3 img:nth-child(2){
	justify-self:center;
	align-self:start;
	width:19vw;
}
.next_visual.type_3 img:nth-child(3){
	justify-self:end;
	align-self:start;
	width:19vw;
}

/*画像2枚重ね*/
.next_visual.type_2b {
    width:60vw;
    position:absolute;
    right:4em;
    top:4em;
}
.next_visual.type_2b img:nth-child(1){
    position:absolute;
	width:50vw;
    z-index:2;
}
.next_visual.type_2b img:nth-child(2){
    position:absolute;
    right:0;
    top:5em;
	width:50vw;
    z-index:1;
}

.next_label {
    position:absolute;
    top:2rem;
    left:2rem;
    z-index:2;

    font-family:'roboto_l';
    font-size:1.8em;
    font-weight:400;
    line-height:1em;
    color:#ffffff;
    letter-spacing:0.1em;
}
.next_title  {
    position:absolute;
    bottom:2rem;
    left:2rem;
    z-index:2;
}
.next_title h3 {
    font-family: "FP-ヒラギノ角ゴ ProN W6";
    font-size:2.4em;
    font-weight:700;
    color:#fff;
    line-height:1.4em;
    letter-spacing:0.05em;
    transition: all .5s ease;
}
.next_title p {
    font-family:'roboto_l';
    font-size:1.8em;
    font-weight:400;
    line-height:1em;
    margin-bottom:0.4em;
    color:#ffffff;
    letter-spacing:0.1em;
    margin-bottom:1.2em;
}

/************************************************
■トップのプロジェクトコンテナ　個別
*************************************************/

.next.project_2024_vs_full,
.project_2024_vs_full .visual_main {
    background-image: radial-gradient(at 0% 0%, #B4A7FE 0%, #818CFF 90%);
}

.next.project_2024_mv,
.project_2024_mv .visual_main {
    background-image: linear-gradient(90deg, #6EBCF7 10%, #FFD6BB 70%, #EB938D 100%);
}
.project_2024_mv .visual_sub {
    background-image: linear-gradient(90deg, #FFD6BB 0%, #EB938D 100%);
}

.next.project_2024_kr,
.project_2024_kr .visual_main {
    background-image: radial-gradient(at 0% 0%, #E465A7 0%, #AE005C 95%);
}

.next.project_2023_il,
.project_2023_il .visual_main {
    background-image: radial-gradient(at 0% 0%, #ABB8F8 0%, #667FDA 30%, #494FA4 100%);
}

.next.project_2023_vs_min,
.project_2023_vs_min .visual_main {
    background-image: linear-gradient(90deg, #E9AAB6 10%, #A281EA 70%, #6273EF 100%);
}

.next.project_2023_vs_logo,
.project_2023_vs_logo .visual_main {
    background-image: linear-gradient(90deg, #808FFF 10%, #4544F3 70%, #3936F1 100%);
}
/*電子署名サービスロゴデザインのみ適用*/
.next.project_2023_vs_logo .next_visual {
    width:60vw;
    height:calc(100% - 4em);
    display:grid;
    place-content: center;
    place-items: center;
}
.next.project_2023_vs_logo .next_visual img {
    box-shadow:none;
    max-width:54em;
    height:auto;
}

.next.project_2022_ac,
.project_2022_ac .visual_main {
    background-image: linear-gradient(120deg, #C2A798 0%, #C2A798 12%, #F1EEE9 50%, #7CB7E5 100%);
}

.next.project_2022_spl,
.project_2022_spl .visual_main {
    background-image: radial-gradient(at 0% 0%, #FFB1A5 0%, #4920EF 100%);
}

.next.project_2021_ts,
.project_2021_ts .visual_main {
    background-image: radial-gradient(at 0% 0%, #FFDBD4 10%, #F2A2A1 80%, #F1817E 100%);
}

.next.project_2021_es,
.project_2021_es .visual_main {
    background-image: radial-gradient(at 0% 0%, #80B9FF 0%, #5B54F2 100%);
}

.next.project_2021_es_logo,
.project_2021_es_logo .visual_main {
    background-image: linear-gradient(90deg, #8E94DD 10%, #DFB8D8 50%, #FFDBD4 100%);
}
.next.project_2021_es_logo .next_visual img:nth-child(1){
    box-shadow:none;
    width:auto;
    height:6em;
    margin-bottom:4em;
}
.next.project_2021_es_logo .next_visual img:nth-child(2){
    box-shadow:none;
    width:auto;
    height:6em;
}
.next.project_2021_es_logo .next_visual {
    width:60vw;
    height:calc(100% - 4em);
    position:absolute;
    display:grid;
    place-content: center;
}

.next.project_2020_hs,
.project_2020_hs .visual_main {
    background-image: linear-gradient(90deg, #63C3B0 10%, #349ADD 70%, #00418F 100%);
}
.next.project_2020_hs .next_visual {
    width:60vw;
    position:absolute;
    display:flex;
    column-gap:2em;
    justify-content: center;
}
.next.project_2020_hs .next_visual img {
    width:17em;
    height:auto;
}


.next.project_2016_nxc,
.project_2016_nxc .visual_main {
    background-image: radial-gradient(at 0% 0%, #8BCD5D 0%, #0E9B90 95%);
}

.next.project_2013_ish,
.project_2013_ish .visual_main {
    background-image: radial-gradient(at 0% 0%, #C5AD9B 0%, #816854 50%, #5E5251 100%);
}

.next.project_2013_hu,
.project_2013_hu .visual_main {
    background-image: linear-gradient(90deg, #71B8F4 0%, #ACD9E3 50%, #7AD8D2 100%);
}

/************************************************
■プロジェクトページ　個別
*************************************************/
.visual_main {
    display: grid;
    place-content: center;
    place-items: center;
    padding:4em;
    column-gap: 3em;
    row-gap: 3em;
}
.visual_main .img {
    width:64em;
    box-shadow:rgba(0,0,0,0.15) 5px 10px 30px;
}
.visual_main p {
    color:#fff;
    text-align:center;
    font-size:1.2em;
    line-height:1.7;
    font-family: "FP-ヒラギノ角ゴ ProN W3";
    font-weight:400;
    /*letter-spacing:0.1em;*/
    font-family: "FP-ヒラギノ角ゴ ProN W6";
    font-weight:700;
}


.visual_sub {
    display: grid;
    place-content: center;
    place-items: center;
    padding:4em;
    column-gap: 3em;
    row-gap: 3em;
}
.project_2023_vs_logo .visual_sub {
    background:#F2F2F2;
}
.visual_sub .img {
    width:64em;
    box-shadow:rgba(0,0,0,0.15) 5px 10px 30px;
}
.visual_sub p {
    color:#fff;
    text-align:center;
    font-size:1.2em;
    line-height:1.7;
    font-family: "FP-ヒラギノ角ゴ ProN W3";
    font-weight:400;
    /*letter-spacing:0.1em;*/
    font-family: "FP-ヒラギノ角ゴ ProN W6";
    font-weight:700;
}


.visual .img.no_shadow {
    box-shadow:none !important;
}


/*パターン 画像2枚 1行2列*/
.visual .type_2 {
    grid-template-columns:31em 31em;
    grid-template-rows:repeat(2, auto);
    grid-column-gap:2em;
    grid-row-gap:3em;
}
.visual .type_2 .img {
    width:100%;
    box-shadow:rgba(0,0,0,0.15) 5px 10px 30px;
}
.visual .type_2 div:nth-child(1) {
    grid-area: 1 / 1 / 2 / 2;
}
.visual .type_2 div:nth-child(2) {
    grid-area: 1 / 2 / 2 / 3;
}
.visual .type_2 p {
    grid-area: 2 / 1 / 3 / 3;
}
/*特例*/
.project_2023_vs_logo .visual .type_2 {
    grid-template-columns:auto auto;
    grid-template-rows:auto;
    grid-column-gap:5vw;
}
.project_2023_vs_logo .visual .type_2 div:nth-child(2) {
    width:45em;
}

/*パターン 縦に画像2枚 1行2列*/
.visual .type_2v {
    grid-template-columns:100%;
    grid-template-rows:repeat(2, auto);
    grid-column-gap:2em;
    grid-row-gap:4em;
    padding:6em 0;
}
.visual .type_2v .img {
    width:100%;
}

/*パターン 画像3枚 1行3列*/
.visual .type_3 {
    grid-template-columns:20em 20em 20em;
    grid-template-rows:repeat(2, auto);
    grid-column-gap:2em;
    grid-row-gap:3em;
}
.visual .type_3 .img {
    width:100%;
    box-shadow:rgba(0,0,0,0.15) 5px 10px 30px;
}
.visual .type_3 div:nth-child(1) {
    grid-area: 1 / 1 / 2 / 2;
}
.visual .type_3 div:nth-child(2) {
    grid-area: 1 / 2 / 2 / 3;
}
.visual .type_3 div:nth-child(3) {
    grid-area: 1 / 3 / 2 / 4;
}
.visual .type_3 p {
    grid-area: 2 / 1 / 3 / 4;
}


/************************************************
■プロジェクトページ　グリッドパターン
*************************************************/
.grids {
    display: grid;
    margin:8em auto;
    justify-content: center;/*gridsを自体を中央へ*/
    justify-items: center;/*コンテンツを中央へ*/
}
.grids div .img {
    width:100%;
    height:auto;
    border-top:#ddd 1px solid;
    border-left:#ddd 1px solid;
    border-bottom:#ccc 1px solid;
    border-right:#ddd 1px solid;
    box-shadow:rgba(0,0,0,0.25) 5px 15px 30px;
}
.grids div .img.no_shadow {
    box-shadow:none;
    border:none;
}
.grids div .img.frame {
    width:calc(100% - 4em);
    padding:2em;
}
/*縦に複数枚配置したら.gridにいれる*/
.img_multiple {
    display:flex;
    flex-direction: column;
    row-gap:3em;
}

.grids p {
    color:#908F93;
    font-size:1.2em;
    line-height:1.7;
    font-family: "FP-ヒラギノ角ゴ ProN W3";
    font-weight:400;
    letter-spacing:0.1em;

    /*letter-spacing:0.1em;*/
    font-family: "FP-ヒラギノ角ゴ ProN W6";
    font-weight:700;
}
.type_project .grids p {
    color:#908F93;
    font-size:1.1em;
    line-height:1.7;
    font-family: "FP-ヒラギノ角ゴ ProN W3";
    font-weight:400;
    letter-spacing:0.05em;
    text-align:center;
    
    margin-top:0.5em;
    background:#F6F5F7;
    padding:1em 2em;
    border-radius:0.6em;
}



/*パターン 画像3枚 2行2列（左列2 右列1）*/
.grids.type_3a {
    grid-template-columns:30em 30em;
    grid-template-rows:repeat(3, auto);
    grid-column-gap:4em;
    grid-row-gap:2em;
}
.grids.type_3a div:nth-child(1) {
    grid-area: 1 / 1 / 2 / 2;
}
.grids.type_3a div:nth-child(2) {
    grid-area: 2 / 1 / 3 / 2;
}
.grids.type_3a div:nth-child(3) {
    grid-area: 1 / 2 / 3 / 3;
}
.grids.type_3a p {
    grid-area: 3 / 1 / 4 / 3;
}


/*パターン 画像3枚 2行2列（左列1 右列2）*/
.grids.type_3b {
    grid-template-columns:30em 30em;
    grid-template-rows:repeat(3, auto);
    grid-column-gap:4em;
    grid-row-gap:2em;
}
.grids.type_3b div:nth-child(1) {
    grid-area: 1 / 1 / 3 / 2;
}
.grids.type_3b div:nth-child(2) {
    grid-area: 1 / 2 / 2 / 3;
}
.grids.type_3b div:nth-child(3) {
    grid-area: 2 / 2 / 3 / 3;
}
.grids.type_3b p {
    grid-area: 3 / 1 / 4 / 3;
}


/*パターン 画像3枚 1行3列*/
.grids.type_3c {
    grid-template-columns:30em 30em;
    grid-template-rows:repeat(3, auto);
    grid-column-gap:1em;
    grid-row-gap:4em;
}
.grids.type_3c div:nth-child(1) {
    grid-area: 1 / 1 / 2 / 3;
}
.grids.type_3c div:nth-child(2) {
    grid-area: 2 / 1 / 3 / 2;
}
.grids.type_3c div:nth-child(3) {
    grid-area: 2 / 2 / 3 / 3;
}
.grids.type_3c p {
    grid-area: 3 / 1 / 4 / 3;
}



/*パターン 画像1枚 1行1列*/
.grids.type_1 {
    width:64em;
    grid-row-gap:2em;
}

/*パターン 画像2枚 1行2列*/
.grids.type_2 {
    grid-template-columns:31em 31em;
    grid-template-rows:repeat(2, auto);
    grid-column-gap:3em;
    grid-row-gap:3em;
}
.grids.type_2 div:nth-child(odd) {
    place-self: start end;
}
.grids.type_2 div:nth-child(even) {
    place-self: start start;
}
.grids.type_2 div:nth-child(1) {
    grid-area: 1 / 1 / 2 / 2;
}
.grids.type_2 div:nth-child(2) {
    grid-area: 1 / 2 / 2 / 3;
}
.grids.type_2 p {
    grid-area: 2 / 1 / 3 / 3;
}


/*パターン 画像3枚 1行3列*/
.grids.type_3 {
    grid-template-columns:20em 20em 20em;
    grid-template-rows:auto;
    grid-column-gap:2em;
    grid-row-gap:3em;
}
.grids.type_3 div:nth-child(1) {
    grid-area: 1 / 1 / 2 / 2;
}
.grids.type_3 div:nth-child(2) {
    grid-area: 1 / 2 / 2 / 3;
}
.grids.type_3 div:nth-child(3) {
    grid-area: 1 / 3 / 2 / 4;
}
.grids.type_3 p {
    grid-area: 2 / 1 / 3 / 4;
}


/*パターン 画像4枚 2行2列*/
.grids.type_4 {
    grid-template-columns:31em 31em;
    grid-template-rows:repeat(2, auto);
    grid-column-gap:3.5em;
    grid-row-gap:3em;
}
.grids.type_4 div:nth-child(odd) {
    place-self: start end;
}
.grids.type_4 div:nth-child(even) {
    place-self: start start;
}
.grids.type_2 div:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
.grids.type_2 div:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
.grids.type_2 div:nth-child(3) { grid-area: 2 / 1 / 3 / 2; }
.grids.type_2 div:nth-child(4) { grid-area: 2 / 2 / 3 / 3; }
.grids.type_4 p { grid-area: 3 / 1 / 4 / 3; }



/*パターン 画像6枚 2行3列*/
.grids.type_6 {
    grid-template-columns:32em 32em;
    grid-template-rows:repeat(4, auto);
    grid-column-gap:3em;
    grid-row-gap:3em;
}
.grids.type_6 div:nth-child(odd) {
    place-self: start end;
}
.grids.type_6 div:nth-child(even) {
    place-self: start start;
}
.grids.type_6 div:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
.grids.type_6 div:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
.grids.type_6 div:nth-child(3) { grid-area: 2 / 1 / 3 / 2; }
.grids.type_6 div:nth-child(4) { grid-area: 2 / 2 / 3 / 3; }
.grids.type_6 div:nth-child(5) { grid-area: 3 / 1 / 4 / 2; }
.grids.type_6 div:nth-child(6) { grid-area: 3 / 2 / 4 / 3; }
.grids.type_6 p { grid-area: 4 / 1 / 5 / 3; }



/*パターン 画像6枚 2行3列*/
.grids.type_6a {
    grid-template-columns:20em 20em 20em;
    grid-template-rows:repeat(3, auto);
    grid-column-gap:2em;
    grid-row-gap:3em;
}
.grids.type_6a div:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
.grids.type_6a div:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
.grids.type_6a div:nth-child(3) { grid-area: 1 / 3 / 2 / 4; }
.grids.type_6a div:nth-child(4) { grid-area: 2 / 1 / 3 / 2; }
.grids.type_6a div:nth-child(5) { grid-area: 2 / 2 / 3 / 3; }
.grids.type_6a div:nth-child(6) { grid-area: 2 / 3 / 3 / 4; }
.grids.type_6a p { grid-area: 3 / 1 / 4 / 4; }





/************************************************
■プロジェクトページ　下部の説明エリア
*************************************************/
.detail {
    background:#F2F2F2;
    padding:2em;
    display: grid;
    grid-template-columns: 50% auto;
    grid-template-rows: repeat(3, auto);
    grid-column-gap:4rem;
    grid-row-gap:4rem;
}
.detail .title {
    grid-area: 1 / 1 / 2 / 3;
}
.detail .description {
    grid-area: 2 / 1 / 3 / 3;
}
.detail .data {
    grid-area: 3 / 1 / 4 / 2;
}
.detail .service {
    grid-area: 3 / 2 / 4 / 3;
    justify-self:end;
	align-self:start;
}


/*■タイトル*/
.detail .title {
    display: grid;
    grid-template-columns:1fr 6em 1fr;
    grid-template-rows: auto;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
.detail .title div:nth-child(1){
	justify-self:start;
	align-self:start;
}
.detail .title div:nth-child(2){
	justify-self:center;
	align-self:start;
}
.detail .title div:nth-child(3){
	justify-self:end;
	align-self:start;
}

.detail .title h2 {
    font-family: "FP-ヒラギノ角ゴ ProN W6";
    font-weight:700;
    font-size:2.8em;
    line-height:1.2;
}
.detail .title .center p {
    font-family:'roboto_m';
    font-size:1.4em;
    font-weight:400;
    line-height:2.5;
    margin-bottom:0.4em;
    color:#AAA8AF;
    letter-spacing:0.1em;
}
.detail .title .right p {
    font-family: "FP-ヒラギノ角ゴ ProN W3";
    font-size:1.1em;
    font-weight:400;
    color:#AAA8AF;
    line-height:1.6;
    letter-spacing:0.03em;
    text-align:right;
}

.description p {
    font-family: "FP-ヒラギノ角ゴ ProN W3";
    font-size:1.2em;
    font-weight:400;
    line-height:2.2;
    letter-spacing:0.05em;
    /*color:#7F7E84;*/
}

/*リスト*/
.data {
    display:flex;
    flex-direction:column;
    row-gap:0.5rem;
}
.data > li {
    padding:0.2rem 0 0.4rem 0;
    line-height:1.5;
    /*border-bottom:#BBBABF 1px solid;*/
    border-bottom:#CECDD1 1px solid;
    font-family: "FP-ヒラギノ角ゴ ProN W3";
    font-size:1em;
    font-weight:400;
    line-height:2.4;
    letter-spacing:0.05em;
}
.data > li:last-child {
    border-bottom:none;
}
.data .unit {
    display:flex;
}
.data .unit dt {
    width:8em;
}

/*アイコン*/
.service {
    display:flex;
    column-gap:0.6rem;
    row-gap:0.8rem;
    flex-wrap:wrap;
}
.service > li {
    padding:0.3em 1em;
    border-radius:5em;
    color:#CAC8CE;
    font-family: "FP-ヒラギノ角ゴ ProN W3";
    font-size:1em;
    font-weight:400;
    line-height:1.5;
    letter-spacing:0.05em;
}
.service > li.enable {
    border:#CECDD1 1px solid;
    /*color:#AAA8AF;*/
    color:#000;
    background:#F9F9F9;
    font-family: "FP-ヒラギノ角ゴ ProN W3";
    font-size:1em;
    font-weight:400;
    /*box-shadow:rgba(0,0,0,0.15) 0px 1px 2px;*/
}





.halftone {
    background: white;
    position: relative;
    filter: contrast(25000%);
    overflow: hidden;
    transform: translateZ(0); /* force a HW accelerated layer */
}

.halftone > * {
    filter: brightness(0.5) blur(4px);
    animation: 10s animation-filter infinite alternate;
    /*animation: 10s animation-filter forwards alternate;*/
}

.halftone::after {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    right: -100%;
    bottom: -100%;
    background-blend-mode: multiply;
    background:
        radial-gradient(8px 8px, cyan, white),
        radial-gradient(8px 8px, magenta, white),
        radial-gradient(8px 8px, yellow, white);
    background-size: 8px 8px;
    background-position: 0 -3px, -2px 0, 2px 0;
    mix-blend-mode: screen;
    pointer-events: none;
    transform: rotate(11.25deg);
    transition: 1s ease-in-out transform;
    z-index: 1;
    /*animation: 10s animation-overlay infinite alternate;*/
    animation: 10s animation-overlay forwards alternate;
}

@keyframes animation-overlay {
    0% {
        transform: rotate(45.25deg) scale(10);
    }

    100% {
        transform: rotate(11.25deg);
    }
}

@keyframes animation-filter {
    0% {
        filter: brightness(0.5) blur(40px);
    }

    100% {
        filter: brightness(0.5) blur(4px);
    }
}