@charset "UTF-8";
/* --------------------------------

Site Name: [ 汎用scssテンプレート ]
Site URI: [ 汎用scssテンプレート ]
Description: [ 汎用scssテンプレート ]
Version: [ 1.0 ]
Author: gramglan
Author URI: gramglan.work

-------------------------------- */
/* SITE COLOR */
/*
mixin
*/
/* --------------------------------
MIXIN
- gramglan
-------------------------------- */
/* SETTING */
/* mixin */
/* --------------------------------
汎用MIXIN
-------------------------------- */
/* margin padding 0指定 */
/* BOX-SIZING */
/* 透過 */
/* hover処理 */
/* 画像のhover処理 */
/* 吹き出し
@include arrow(#ccc, 10, 30%);
*/
/* SNS COLOR */
/* alpha base color */
/*
gradient
@include gradient(#ff00ff, #ff00cc, vertical);
*/
/* --------------------------------
サポートブラウザの設定
-------------------------------- */
/* ベンダープレフィックス */
/* --------------------------------
clearfix
-------------------------------- */
/* --------------------------------
FONT STYLE
-------------------------------- */
/* font-family
@include font__noto;
*/
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/* width設定 */
/*
	base padding
*/
/*
	base margin
*/
/*
	flexbox
*/
/*
	absolute
	@include absolute(0,0,0,0);
	@include absolute($t:0,$r:0, $b:0,$l:0);
*/
/* --------------------------------
MEDIA QUERY

@include mq(){}

'xsmall': 320px,
'small' : 600px,
'medium': 768px,
'large' : 1024px,
'xlarge': 1280px,

@include or(){};

'p': 'portrait',
'l': 'landscape',

-------------------------------- */
/* --------------------------------
角丸設定
-------------------------------- */
/* 基本設定 */
/* --------------------------------
MIXIN
- gramglan


MEDIA QUERY

@include mq(){}

'xsmall': 320px,
'small' : 600px,
'medium': 768px,
'large' : 1024px,
'xlarge': 1280px,

@include or(){};

'p': 'portrait',
'l': 'landscape',

-------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Rozha+One&display=swap");
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-size: 16px;
  font-size: 5vw;
  color: #333; }
  @media screen and (min-width: 768px) {
    body {
      font-size: 16px;
      font-size: 1rem; } }

a {
  text-decoration: none; }
  a:hover {
    outline: none;
    border: none; }

img {
  vertical-align: bottom;
  max-width: 100%; }

ul, li, dl, dt, dd, ol, p, h1, h2, h3, h4, h5, h6, p, figure, figcaption, input, textarea {
  margin: 0;
  padding: 0;
  list-style: none; }

ul:after, ol:after {
  *zoom: 1; }
  ul:after:after, ol:after:after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden; }

/* --------------------------------
MIXIN
- gramglan


MEDIA QUERY

@include mq(){}

'xsmall': 320px,
'small' : 600px,
'medium': 768px,
'large' : 1024px,
'xlarge': 1280px,

@include or(){};

'p': 'portrait',
'l': 'landscape',

-------------------------------- */
/* 横幅指定 */
.mod__wrap {
  width: 100%;
  position: relative; }
  @media screen and (min-width: 768px) {
    .mod__wrap {
      margin: 0 auto;
      width: 100%; } }
  @media screen and (min-width: 768px) and (min-width: 0px) {
    .mod__wrap {
      width: 100%; } }
  @media screen and (min-width: 768px) and (min-width: 600px) {
    .mod__wrap {
      width: 100%; } }
  @media screen and (min-width: 768px) and (min-width: 768px) {
    .mod__wrap {
      width: 100%; } }
  @media screen and (min-width: 768px) and (min-width: 1024px) {
    .mod__wrap {
      max-width: 1140px; } }
  @media screen and (min-width: 768px) and (min-width: 1280px) {
    .mod__wrap {
      max-width: 1140px; } }

.mod__flex {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  /* reverse setting */ }
  .mod__flex .mod__flex__item {
    width: 100%; }
    .mod__flex .mod__flex__item.-w20 {
      width: 50%; }
    @media screen and (min-width: 768px) {
      .mod__flex .mod__flex__item.-w10 {
        width: 10%; }
      .mod__flex .mod__flex__item.-w20 {
        width: 20%; }
      .mod__flex .mod__flex__item.-w25 {
        width: 24%; }
      .mod__flex .mod__flex__item.-w30 {
        width: 30%; }
      .mod__flex .mod__flex__item.-w40 {
        width: 40%; }
      .mod__flex .mod__flex__item.-w46 {
        width: 42%; }
      .mod__flex .mod__flex__item.-w50 {
        width: 50%; }
      .mod__flex .mod__flex__item.-w60 {
        width: 60%; }
      .mod__flex .mod__flex__item.-w70 {
        width: 70%; }
      .mod__flex .mod__flex__item.-w80 {
        width: 80%; }
      .mod__flex .mod__flex__item.-w90 {
        width: 90%; }
      .mod__flex .mod__flex__item.-w100 {
        width: 100%; } }
    @media screen and (min-width: 1024px) {
      .mod__flex .mod__flex__item {
        padding: 0 0 0 0; } }
  @media screen and (min-width: 1024px) and (min-width: 768px) {
    .mod__flex .mod__flex__item {
      padding: 0 0 0 0; } }
    @media screen and (min-width: 1024px) {
        .mod__flex .mod__flex__item.-flex {
          -ms-flex: 1;
          /*IE10*/
          -webkit-box-flex: 1;
          /* Android4.3以下、Safari3.1〜6.0 */
          -webkit-flex: 1;
          /* Safari6.1以降 */ }
        .mod__flex .mod__flex__item.-w10 {
          width: 10%; }
        .mod__flex .mod__flex__item.-w20 {
          width: 20%; }
        .mod__flex .mod__flex__item.-w25 {
          width: 24%; }
        .mod__flex .mod__flex__item.-w30 {
          width: 30%; }
        .mod__flex .mod__flex__item.-w40 {
          width: 40%; }
        .mod__flex .mod__flex__item.-w50 {
          width: 50%; }
        .mod__flex .mod__flex__item.-w60 {
          width: 60%; }
        .mod__flex .mod__flex__item.-w70 {
          width: 70%; }
        .mod__flex .mod__flex__item.-w80 {
          width: 80%; }
        .mod__flex .mod__flex__item.-w90 {
          width: 90%; }
        .mod__flex .mod__flex__item.-w100 {
          width: 100%; } }
    .mod__flex .mod__flex__item.-full {
      width: 100%; }
  .mod__flex.-just_around {
    -ms-flex-pack: justify;
    /*IE10*/
    -webkit-box-pack: justify;
    /* Android4.3以下、Safari3.1〜6.0 */
    -webkit-justify-content: space-around;
    /* Safari6.1以降 */
    justify-content: space-around; }
  .mod__flex.-just_center {
    -ms-flex-pack: justify;
    /*IE10*/
    -webkit-box-pack: justify;
    /* Android4.3以下、Safari3.1〜6.0 */
    -webkit-justify-content: center;
    /* Safari6.1以降 */
    justify-content: center; }
  .mod__flex.-just_between {
    -ms-flex-pack: justify;
    /*IE10*/
    -webkit-box-pack: justify;
    /* Android4.3以下、Safari3.1〜6.0 */
    -webkit-justify-content: space-between;
    /* Safari6.1以降 */
    justify-content: space-between; }
  .mod__flex.-rev_all {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    flex-flow: row-reverse wrap;
    -ms-flex-flow: row-reverse wrap;
    -webkit-flow: row-reverse wrap; }
  .mod__flex.-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  @media screen and (min-width: 768px) {
    .mod__flex.-rev {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
      flex-flow: row-reverse wrap;
      -ms-flex-flow: row-reverse wrap;
      -webkit-flow: row-reverse wrap; } }

/* JS用 */
/* 各ページ */
/* --------------------------------
HEADER
- gramglan

MEDIA QUERY

@include mq(){}

'xsmall': 320px,
'small' : 600px,
'medium': 768px,
'large' : 1024px,
'xlarge': 1280px,

@include or(){};

'p': 'portrait',
'l': 'landscape',

-------------------------------- */
/* body add class*/
.__sp {
  display: block; }
  @media screen and (min-width: 768px) {
    .__sp {
      display: none; } }

.__pc {
  display: none; }
  @media screen and (min-width: 768px) {
    .__pc {
      display: block; } }

.top {
  position: relative;
  text-align: center;
  margin-bottom: 3vw; }
  .top .toplogo {
    position: absolute;
    left: 2vw;
    top: 2vw;
    max-width: 150px;
    height: auto; }
  .top .text {
    position: relative;
    top: -15vw; }
    @media screen and (min-width: 768px) {
      .top .text {
        top: -7.5vw; } }
    .top .text h1 {
      font-family: Rozha One;
      font-style: normal;
      font-weight: normal;
      color: #3068AA;
      margin-bottom: 2vw;
      font-size: 40px;
      line-height: 40px;
      text-align: left;
      padding: 0 0 0 0.9em;
      position: relative;
      letter-spacing: 2px;
      top: -15vw; }
      @media screen and (min-width: 768px) {
        .top .text h1 {
          padding: 0;
          font-size: 60px;
          line-height: 114px;
          text-align: center;
          top: -2vw; } }
      @media screen and (min-width: 1024px) {
        .top .text h1 {
          font-size: 80px;
          top: -1vw; } }
    .top .text p {
      font-family: Roboto;
      font-style: normal;
      font-weight: normal;
      font-size: 18px;
      line-height: 30px;
      /* or 167% */
      text-align: center;
      color: #666666;
      position: relative;
      top: -15vw;
      text-align: left;
      font-size: 14px;
      padding: 0 2.6em; }
      @media screen and (min-width: 768px) {
        .top .text p {
          font-size: 18px;
          top: -5vw;
          text-align: center; } }
      @media screen and (min-width: 1024px) {
        .top .text p {
          font-size: 18px;
          top: -1vw;
          text-align: center; } }

.service {
  background: #F2F8FF;
  text-align: center;
  position: relative;
  padding: 14vw 8vw 20vw; }
  @media screen and (min-width: 768px) {
    .service {
      padding: 10vw 8vw 12vw; } }
  .service:before {
    display: block;
    position: absolute;
    width: 1px;
    height: 120px;
    background: #3068AA;
    content: "";
    top: -60px;
    left: 50%; }
  .service:after {
    display: block;
    position: absolute;
    width: 1px;
    height: 120px;
    background: #3068AA;
    content: "";
    bottom: -60px;
    left: 50%; }
  .service .-img {
    position: absolute;
    width: 465px;
    height: auto;
    right: 60%;
    top: -3em; }
  .service h2 {
    font-family: Rozha One;
    font-style: normal;
    font-weight: normal;
    font-size: 48px;
    line-height: 68px;
    color: #3068AA; }
  .service .read {
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    color: #666666;
    margin-bottom: 8vw; }
  .service .service_item {
    margin-top: 5vw; }
    .service .service_item .-text {
      padding: 0vw 3vw;
      text-align: left; }
    .service .service_item h3 {
      font-family: Rozha One;
      font-style: normal;
      font-weight: normal;
      font-size: 32px;
      line-height: 45px;
      color: #3068AA; }
    .service .service_item p {
      font-family: Roboto;
      font-style: normal;
      font-weight: normal;
      font-size: 13px;
      line-height: 18px;
      color: #666666;
      margin-bottom: 2em;
      line-height: 1.5; }
      @media screen and (min-width: 768px) {
        .service .service_item p {
          font-size: 15px; } }
    .service .service_item .cs {
      border: 1px solid #ccc;
      color: #ccc;
      max-width: 160px;
      padding: 0.5em 1em;
      display: block;
      text-align: center;
      margin: 0 auto;
      font-size: 15px; }
      @media screen and (min-width: 768px) {
        .service .service_item .cs {
          margin: 0;
          font-size: 15px; } }
    .service .service_item .links {
      border: 1px solid #666666;
      color: #666666;
      max-width: 300px;
      padding: 0.5em 1em;
      text-align: center;
      display: block;
      -webkit-transition: 0.3s ease-in-out;
      -moz-transition: 0.3s ease-in-out;
      -ms-transition: 0.3s ease-in-out;
      -o-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out;
      margin: 0 auto;
      font-size: 15px; }
      .service .service_item .links:hover {
        opacity: 0.5;
        filter: alpha(opacity=50); }
      @media screen and (min-width: 768px) {
        .service .service_item .links {
          margin: 0;
          font-size: 15px; } }

.company {
  padding: 20vw 2vw 22vw;
  text-align: center; }
  @media screen and (min-width: 768px) {
    .company {
      padding: 10vw 8vw 12vw; } }
  .company h2 {
    font-family: Rozha One;
    font-style: normal;
    font-weight: normal;
    font-size: 48px;
    line-height: 68px;
    color: #3068AA; }
  .company .read {
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    color: #666666;
    margin-bottom: 3vw; }
  .company table {
    margin: 0 auto;
    max-width: 600px; }
    .company table th, .company table td {
      padding: 0.5em 1em; }
    .company table th {
      text-align: right;
      font-family: Roboto;
      font-style: normal;
      font-weight: normal;
      font-size: 15px;
      line-height: 18px;
      /* identical to box height */
      color: rgba(48, 104, 170, 0.5); }
    .company table td {
      text-align: left;
      font-family: Roboto;
      font-style: normal;
      font-weight: normal;
      font-size: 16px;
      line-height: 19px;
      /* identical to box height */
      color: #666666; }

.contact {
  background: #F7F7F7 url(../img/contact.png) no-repeat bottom center;
  background-size: 25%;
  padding: 8vw 5vw; }
  .contact p {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 18px;
    color: #666666;
    margin-bottom: 1em; }
  .contact a {
    display: inline-block;
    background: #3068AA;
    border-radius: 8px;
    text-align: center;
    color: #FFFFFF;
    font-size: 18px;
    display: block;
    padding: 1em 1em;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out; }
    .contact a:hover {
      opacity: 0.5;
      filter: alpha(opacity=50); }
    .contact a span {
      color: #FFFFFF;
      display: block;
      opacity: 0.5;
      font-size: 11px; }

footer {
  background: #333;
  text-align: center;
  color: #fff;
  font-size: 13px;
  padding: 5vw; }
  footer h2 img {
    max-width: 150px;
    height: auto; }
  footer .footer-social-links {
    text-align: center;
    margin-bottom: 1em; }
    footer .footer-social-links li {
      padding: 0 1em;
      display: inline-block; }