/***** トップページ　メイン専用 ↓ *****/


main {
    display: grid;
    grid-template:
        " topimg-left  topimg-main  topimg-right " 514px
        " title-left   title-main   title-right  " 350px
        " workroom     workroom     workroom     " 595px
        " starting     starting     starting     " 595px
        " second       second       second       " 595px
        / 1fr 860px 1fr ;
}
/* スライド部分のグリット位置 */
main #top_slide {
    grid-area: topimg-main;
    position: relative;
}
main .top_slide_left {
    grid-area: topimg-left;
}
main .top_slide_left .blackbox {
    width: 100%;
    height: 360px;
    background-color: black;
    margin-top: 100px;
}
main .top_slide_right {
    grid-area: topimg-right;
}
main .top_slide_right .redbox {
    width: 100%;
    height: 360px;
    background-color: red;
}

.toppage #top_slide .slidephoto {
    width: 860px;
    height: auto;
    z-index: 0;
}
.toppage #top_slide .slidephoto img {
    width: 860px;
}

.toppage #top_slide .slidecopy {
    position: absolute;
    left: 40px;
    top: 20px;
    z-index: 10;
}

.toppage #top_slide .slidecopy h2 {
    font-size: 40px;
    color: #fcee21;
    line-height: 56px;
    padding-bottom: 30px;
}

.toppage #top_slide .slidecopy p {
    font-size: 26px;
    line-height: 32px;
    color: white;
}

.toppage #top_slide .three_merit {
    position: absolute;
    top: 320px;
    bottom: 0px;
    z-index: 10;
    width: 860px;
    text-align: center;
}

.toppage #top_slide .three_merit img {
    width: 146px;
    padding: 20px;
}
.toppage #top_slide .campaign {
    position: absolute;
    top: 10px;
    right: 50px;
    width: 250px;
    z-index: 99;
}

/***** トップページ　タイトル部分 ↓ *****/
/* タイトル部分のグリット位置 */
.toppage .bigtitle {
    grid-area: title-main;
    position: relative;
    background-color: #EBF0F0;
}

.toppage .bigtitle h1 {
    font-size: 100px;
    font-weight: bold;
    color: black;
    padding-top: 20px;
    padding-left: 40px;
    padding-bottom: 30px;
}

.toppage .bigtitle p {
    font-size: 22px;
    color: black;
    line-height: 33px;
    padding-left: 40px;
    padding-bottom: 50px;
}

/***** トップページ　大タイトル横のページ内リンク ↓ *****/
.toppage .bigtitle .toppage_nav {
    width: 250px;
    position: absolute;
    top: 30px;
    right: 30px;
}

.toppage .bigtitle .toppage_nav li {
    font-size: 20px;
    line-height: 40px;
}

.toppage .bigtitle .toppage_nav li a,
.toppage .bigtitle .toppage_nav li a:link {
    color: #666;
}

.toppage .bigtitle .toppage_nav li a:hover {
    color: #E60013;
}
/* WORKROOMの指定 */
main #workroom {
    grid-area: workroom  ;
    display: grid;
    grid-template:
        " title   image  merit " 337px
        " imgtext text   ・・・ " 258px     
        / 1fr 860px 1fr ;
}
main #workroom h2 {
    grid-area: title;
    background-color: red;
    text-align: right;
    color: white;
    font-size: 50px;
    padding-top: 10px;
    padding-right: 10px;
}
main #workroom .main-visual{
    grid-area: image;
}
main #workroom .main-visual img{
  width: 860px;
}
main #workroom .merit_copy {
    grid-area: merit;
    background-color: red;
    color: white;
    font-size: 14px;
    line-height: 200%;
    padding-top: 20px;
    padding-left: 10px;
}
main #workroom .merit_copy ul {
    list-style-type: none;
}
main #workroom .copy {
    grid-area: text;
    background-color: #EBF0F0;
}
main #workroom .copy h3 {
    font-size: 30px;
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 15px;
}
main #workroom .copy p {
    font-size: 16px;
    padding-left: 20px;
    line-height: 150%;
}
main #workroom .img-text {
    grid-area: imgtext;
    position: relative;
}
main #workroom .img-text img {
    position: absolute;
    right: 10px;
    top: 10px;
}

/* Starting a Businessの指定 */
main #starting {
    grid-area: starting  ;
    display: grid;
    grid-template:
        " title   image  merit " 337px
        " imgtext text   ・・・ " 258px     
        / 1fr 860px 1fr ;
}
main #starting h2 {
    grid-area: title;
    background-color: black;
    text-align: right;
    color: white;
    font-size: 40px;
    padding-top: 10px;
    padding-right: 10px;
}
main #starting .main-visual{
    grid-area: image;
    display: flex;
}
main #starting .main-visual {
    width: 860px;
}

main #starting .main-visual img{
  width: 430px;
}
main #starting .merit_copy {
    grid-area: merit;
    background-color: black;
    color: white;
    font-size: 14px;
    line-height: 200%;
    padding-top: 20px;
    padding-left: 20px;
}
main #starting .merit_copy ul {
    list-style-type: none;
}
main #starting .copy {
    grid-area: text;
    background-color: #EBF0F0;
}
main #starting .copy h3 {
    font-size: 30px;
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 15px;
}
main #starting .copy p {
    font-size: 16px;
    padding-left: 20px;
    line-height: 150%;
}
main #starting .img-text {
    grid-area: imgtext;
    position: relative;
}
main #starting .img-text img {
    position: absolute;
    right: 10px;
    top: 10px;
}






/* Second Businessの指定 */
main #second {
    grid-area: second  ;
    display: grid;
    grid-template:
        " title   image  merit " 337px
        " imgtext text   ・・・ " 258px     
        / 1fr 860px 1fr ;
}
main #second h2 {
    grid-area: title;
    background-color: red;
    text-align: right;
    color: white;
    font-size: 40px;
    padding-top: 10px;
    padding-right: 10px;
}
main #second .main-visual{
    grid-area: image;
    display: flex;
}
main #second .main-visual {
    width: 860px;
}

main #second .main-visual img{
  width: 430px;
}
main #second .merit_copy {
    grid-area: merit;
    background-color: red;
    color: white;
    font-size: 14px;
    line-height: 200%;
    padding-top: 20px;
    padding-left: 20px;
}
main #second .merit_copy ul {
    list-style-type: none;
}
main #second .copy {
    grid-area: text;
    background-color: #EBF0F0;
}
main #second .copy h3 {
    font-size: 30px;
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 15px;
}
main #second .copy p {
    font-size: 16px;
    padding-left: 20px;
    line-height: 150%;
}
main #second .img-text {
    grid-area: imgtext;
    position: relative;
}
main #second .img-text img {
    position: absolute;
    right: 10px;
    top: 10px;
}






/* スマホ用のスタイル */
@media only screen and (max-width: 768px) {

main {
    display: grid;
    grid-template:
        " topimg-main" auto
        " title-main " auto
        " workroom   " auto
        " starting   " auto
        " second     " auto
        / 1fr ;
}


main .top_slide_left , main .top_slide_right{
    display: none;
}
/* スマホ用スライド部分のグリット位置 */

main #top_slide {
    grid-area: topimg-main;
    position: relative;
}
main .top_slide_left {
    grid-area: topimg-left;
}

.toppage {
    padding-top: 20px;
}
.toppage #top_slide .slidephoto {
    width: 100%;
    height: auto;
    z-index: 0;
}
.toppage #top_slide .slidephoto img {
    width: 100%;
}

.toppage #top_slide .slidecopy {
    position: absolute;
    left: 40px;
    top: 20px;
    z-index: 10;
}

.toppage #top_slide .slidecopy h2 {
    font-size: 28px;
    color: #fcee21;
    line-height: 36px;
    padding-bottom: 20px;
}

.toppage #top_slide .slidecopy p {
    font-size: 15px;
    line-height: 22px;
    color: white;
}

.toppage #top_slide .three_merit {
    position: absolute;
    top: 240px;
    bottom: 0px;
    z-index: 10;
    width: 100%;
    text-align: center;
}

.toppage #top_slide .three_merit img {
    width: 25%;
    padding: 1px;
}
.toppage #top_slide .campaign {
    position: absolute;
    top: -80px;
    right: -20px;
    width: 150px;
    z-index: 99;
}

/* スマホ用-Workstyleコピー */
.toppage .bigtitle {
    grid-area: title-main;
}
.toppage .bigtitle {
    width: 100%;
    padding-bottom: 40px;
}
.toppage .bigtitle h1 {
    font-size: 40px;
    padding-left: 8%;
    padding-top: 10px;
    padding-bottom: 5px;
}
 .toppage .bigtitle p {
    font-size: 0.8em;
    line-height: 1.6em;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
 }
 .toppage .bigtitle .toppage_nav {
    position: static;
    padding-bottom: 10px;
 }
  .toppage .bigtitle .toppage_nav ul {
    width: 100%;
    padding-left: 20%;
    padding-top: 0px;
  }
  .toppage .bigtitle .toppage_nav li {
    font-size: 1em;
    line-height: 1.6em;
  }


/* スマホ　WORKROOMの指定 */
main #workroom {
    grid-area: workroom  ;
    display: grid;
    grid-template:
        "title  " auto  
        "image  " auto
        "text   " auto     
        "merit  " auto
        "mgtext " auto
        / 1fr;
}
main #workroom h2 {
    grid-area: title;
    background-color: red;
    text-align: center;
    color: white;
    font-size: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
}
main #workroom .main-visual{
    grid-area: image;
}
main #workroom .main-visual img{
  width: 100%;
}
main #workroom .merit_copy {
    grid-area: merit;
    background-color:black;
    color: white;
    font-size: 14px;
    line-height: 200%;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 40px;
}
main #workroom .merit_copy ul {
    list-style-type: none;
}
main #workroom .merit_copy li {
    display: inline;
    padding-right: 10px;
}
main #workroom .copy {
    grid-area: text;
    background-color: #EBF0F0;
}
main #workroom .copy h3 {
    font-size: 24px;
    line-height: 150%;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 15px;
}
main #workroom .copy p {
    font-size: 16px;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 150%;
    padding-bottom: 30px;
}
main #workroom .img-text {
    grid-area: imgtext;
    position: relative;
}
main #workroom .img-text img {
    position: absolute;
    width: 370px;
    top: -680px;
    opacity: 0.3;
}


/* スマホ　 Startimg Business の指定 */
main #starting {
    grid-area: starting  ;
    display: grid;
    grid-template:
        "title  " auto  
        "image  " auto
        "text   " auto     
        "merit  " auto
        "mgtext " auto
        / 1fr;
}
main #starting h2 {
    grid-area: title;
    background-color: red;
    text-align: center;
    color: white;
    font-size: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 5px solid #fff; 

}
main #starting .main-visual{
    grid-area: image;
    width: 100%;
}
main #starting .main-visual img.imagevisual-left {
  width: 50%;
}
main #starting .main-visual img.imagevisual-right {
  width: 50%;
}
main #starting .merit_copy {
    grid-area: merit;
    background-color:black;
    color: white;
    font-size: 14px;
    line-height: 200%;
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 40px;
    padding-right: 20px;
}
main #starting .merit_copy ul {
    list-style-type: none;
}
main #starting .merit_copy li {
    display: inline;
    padding-right: 10px;
}
main #starting .copy {
    grid-area: text;
    background-color: #EBF0F0;
}
main #starting .copy h3 {
    font-size: 24px;
    line-height: 150%;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 15px;
}
main #starting .copy p {
    font-size: 16px;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 150%;
    padding-bottom: 30px;
}
main #starting .img-text {
    grid-area: imgtext;
    position: relative;
}
main #starting .img-text img {
    position: absolute;
    width: 370px;
    top: -480px;
    opacity: 0.3;
}

/* スマホ　Second Businessの指定 */
main #second{
    grid-area: second  ;
    display: grid;
    grid-template:
        "title  " auto  
        "image  " auto
        "text   " auto     
        "merit  " auto
        "mgtext " auto
        / 1fr;
}
main #second h2 {
    grid-area: title;
    background-color: red;
    text-align: center;
    color: white;
    font-size: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 5px solid #fff; 

}
main #second .main-visual{
    grid-area: image;
    width: 100%;
}
main #second .main-visual img.imagevisual-left {
  width: 50%;
}
main #second .main-visual img.imagevisual-right {
  width: 50%;
}
main #second .merit_copy {
    grid-area: merit;
    background-color:black;
    color: white;
    font-size: 14px;
    line-height: 200%;
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 40px;
    padding-right: 20px;
}
main #second .merit_copy ul {
    list-style-type: none;
}
main #second .merit_copy li {
    display: inline;
    padding-right: 10px;
}
main #second .copy {
    grid-area: text;
    background-color: #EBF0F0;
}
main #second .copy h3 {
    font-size: 24px;
    line-height: 150%;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 15px;
}
main #second .copy p {
    font-size: 16px;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 150%;
    padding-bottom: 30px;
}
main #second .img-text {
    grid-area: imgtext;
    position: relative;
}
main #second .img-text img {
    position: absolute;
    width: 370px;
    top: -480px;
    opacity: 0.3;
}











}