@charset "UTF-8";

/* ========================================================

	base.css => 共通基本CSS

======================================================== */

/* reset

============================================================================================================ */

body,

div,

dl,

dt,

dd,

ul,

ol,

li,

h1,

h2,

h3,

h4,

h5,

h6,

pre,

form,

fieldset,

p,

blockquote,

th,

td {

  margin: 0;

  padding: 0;

}



table {

  font-size: 100%;

  font-family: inherit;

}



fieldset,

img {

  border: 0;

}



img {

  vertical-align: middle;

}



address,

caption,

cite,

code,

dfn,

em,

th,

var {

  font-style: normal;

  font-weight: normal;

}



ol,

ul {

  list-style: none;

}



caption,

th {

  text-align: left;

}



h1,

h2,

h3,

h4,

h5,

h6 {

  font-size: 100%;

}



q:before,

q:after {

  content: "";

}



abbr,

acronym {

  border: 0;

}



select,

input,

textarea {

  font-size: 100%;

}



header,

footer,

nav,

section,

article,

figure,

aside {

  display: block;

}



button {

  background-color: transparent;

  border: none;

  cursor: pointer;

  outline: none;

  padding: 0;

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

}



button {

  cursor: pointer;

}



label {

  cursor: pointer;

}



input,

select,

textarea,

button {

  margin: 0;

  vertical-align: middle;

  font-family: inherit;

  outline: none;

  font-size: 100%;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

}



iframe {

  vertical-align: middle;

}



@media screen and (max-width: 960px) {

  img {

    max-width: 100%;

    height: auto;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

  }

  iframe {

    max-width: 100%;

    height: 200px;

  }

}

table {

  border-collapse: collapse;

  border-spacing: 0;

  line-height: 1.7;

}



/* text-align

============================================================================================================ */

.tal {

  text-align: left;

}



.tac {

  text-align: center;

}



.tar {

  text-align: right;

}



.tac_tal {

  text-align: center;

}



.tal_tac {

  text-align: left;

}



.tac_tar {

  text-align: center;

}



@media screen and (max-width: 480px) {

  .tac_tal {

    text-align: left;

  }

  .tal_tac {

    text-align: center;

  }

  .tac_tar {

    text-align: right;

  }

}

/* margin

============================================================================================================ */

.m00 {

  margin: 0 !important;

}



.mb {

  margin-bottom: 1.5em !important;

}



.mb00 {

  margin-bottom: 0 !important;

}



.mb05 {

  margin-bottom: 5px !important;

}



.mb08 {

  margin-bottom: 8px !important;

}



.mb10 {

  margin-bottom: 10px !important;

}



.mb15 {

  margin-bottom: 15px !important;

}



.mb20 {

  margin-bottom: 20px !important;

}



.mb25 {

  margin-bottom: 25px !important;

}



.mb30 {

  margin-bottom: 30px !important;

}



.mb35 {

  margin-bottom: 35px !important;

}



.mb40 {

  margin-bottom: 40px !important;

}



.mb45 {

  margin-bottom: 45px !important;

}



.mb50 {

  margin-bottom: 50px !important;

}



.mt {

  margin-top: 1.5em !important;

}



.mt00 {

  margin-top: 0 !important;

}



.mt05 {

  margin-top: 5px !important;

}



.mt08 {

  margin-top: 8px !important;

}



.mt10 {

  margin-top: 10px !important;

}



.mt15 {

  margin-top: 15px !important;

}



.mt20 {

  margin-top: 20px !important;

}



.mt25 {

  margin-top: 25px !important;

}



.mt30 {

  margin-top: 30px !important;

}



.mt35 {

  margin-top: 35px !important;

}



.mt40 {

  margin-top: 40px !important;

}



.mt45 {

  margin-top: 45px !important;

}



.mt50 {

  margin-top: 50px !important;

}



.mt-40 {

  margin-top: -40px !important;

}



/* padding

============================================================================================================ */

.p00 {

  padding: 0 !important;

}



.pb {

  padding-bottom: 1.3em !important;

}



.pb00 {

  padding-bottom: 0 !important;

}



.pb05 {

  padding-bottom: 5px !important;

}



.pb08 {

  padding-bottom: 8px !important;

}



.pb10 {

  padding-bottom: 10px !important;

}



.pb15 {

  padding-bottom: 15px !important;

}



.pb20 {

  padding-bottom: 20px !important;

}



.pb25 {

  padding-bottom: 25px !important;

}



.pb30 {

  padding-bottom: 30px !important;

}



.pb35 {

  padding-bottom: 35px !important;

}



.pb40 {

  padding-bottom: 40px !important;

}



.pb45 {

  padding-bottom: 45px !important;

}



.pb50 {

  padding-bottom: 50px !important;

}



.pt00 {

  padding-top: 0 !important;

}



.pt05 {

  padding-top: 5px !important;

}



.pt08 {

  padding-top: 8px !important;

}



.pt10 {

  padding-top: 10px !important;

}



.pt15 {

  padding-top: 15px !important;

}



.pt20 {

  padding-top: 20px !important;

}



.pt25 {

  padding-top: 25px !important;

}



.pt30 {

  padding-top: 30px !important;

}



.pt35 {

  padding-top: 35px !important;

}



.pt40 {

  padding-top: 40px !important;

}



.pt45 {

  padding-top: 45px !important;

}



.pt50 {

  padding-top: 50px !important;

}



/* font size

============================================================================================================ */

.fz_s {

  font-size: 12px;

  font-size: 1.2rem;

  line-height: 1.1;

}



.fz_m {

  font-size: 14px;

  font-size: 1.4rem;

  line-height: 1.7;

}



.fz_l {

  font-size: 18px;

  font-size: 1.8rem;

  line-height: 1.7;

}



.fz_ll {

  font-size: 20px;

  font-size: 2rem;

  line-height: 1.6;

}



@media screen and (max-width: 960px) {

  .fz_s {

    font-size: 1.0rem;

  }

  .fz_m {

    font-size: 1.3rem;

  }

  .fz_l {

    font-size: 1.6rem;

  }

  .fz_ll {

    font-size: 1.8rem;

  }

}

/* font weight

============================================================================================================ */

.fwb {

  font-weight: bold;

}



.fwn {

  font-weight: normal !important;

}



/* ========================================================

変数

======================================================== */

/* ========================================================

mixin

======================================================== */

/*content

------------------------------------------------------------------------------------------------------------------*/

/*font-weight

------------------------------------------------------------------------------------------------------------------*/

/*btn

------------------------------------------------------------------------------------------------------------------*/

/*arrow

------------------------------------------------------------------------------------------------------------------*/

/*ico

------------------------------------------------------------------------------------------------------------------*/

/*btn licking

------------------------------------------------------------------------------------------------------------------*/

/*title_color

------------------------------------------------------------------------------------------------------------------*/

/* ========================================================

	template.css => テンプレート用CSS

======================================================== */

html,

body {

  width: 100%;

  overflow-x: hidden;

}



html {

  font-size: 62.5%;

}



body {

  background-color: #fff;

  font-size: 10px;

  font-size: 1rem;

  line-height: 1.7;

  color: #000;

  font-family: "Noto Sans JP" , "游ゴシック Regular", "游ゴシック体" , "Arial", sans-serif;

  -webkit-text-size-adjust: 100%;

  font-weight:350;

}



a {

  text-decoration: none;

  color: #5a5a5a;

  cursor: pointer;

  margin-bottom: 0 !important;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;

  outline: none !important;

}



.link_style {

  color: #0080e5;

  text-decoration: underline;

}



.link_style:hover {

  text-decoration: none;

}



@media screen and (min-width: 1200px) {

  a.tel_link[href^="tel:"] {

    pointer-events: none;

  }

}

/* font

============================================================================================================ */

.robo {

  font-family: "Roboto", sans-serif;

}



.mon {

  font-family: "Montserrat", sans-serif;

}



.mincho {

  font-family: "Noto Serif JP", "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;

}



/* pc / tab / sp

============================================================================================================ */

.sp {

  display: none;

}



.pc {

  display: block;

}



.tab {

  display: none;

}



.pc_tab {

  display: block;

}



.tab_sp {

  display: none;

}



.sps {

  display: none !important;

}



@media screen and (max-width: 960px) {

  .pc {

    display: none !important;

  }

  .tab {

    display: block !important;

  }

  .sp {

    display: none;

  }

  .tab_sp {

    display: block !important;

  }

}

@media screen and (max-width: 480px) {

  .tab {

    display: none !important;

  }

  .sp {

    display: block;

  }

  .pc_tab {

    display: none !important;

  }

  .tab_sp {

    display: block !important;

  }

}

@media screen and (max-width: 320px) {

  .sps {

    display: block !important;

  }

}

/* sp

============================================================================================================ */

@media screen and (max-width: 960px) {

  *[data-label] img {

    display: none;

  }

  *[data-label]:before {

    content: attr(data-label);

  }

  *[data-label-r]:after {

    content: attr(data-label-r);

  }

}

/* w

============================================================================================================ */

.w {

  position: relative;

  display: block;

  max-width: 1000px;

  margin: 0 auto;

}



.w11 {

  position: relative;

  display: block;

  max-width: 1100px;

  margin: 0 auto;

}



.w12 {

  position: relative;

  display: block;

  max-width: 1200px;

  margin: 0 auto;

}



.w13 {

  position: relative;

  display: block;

  max-width: 1300px;

  margin: 0 auto;

}



.w14 {

  position: relative;

  display: block;

  max-width: 1400px;

  margin: 0 auto;

}



.w90 {

  position: relative;

  display: block;

  max-width: 900px;

  margin: 0 auto;

}



.w80 {

  position: relative;

  display: block;

  max-width: 800px;

  margin: 0 auto;

}



.w70 {

  position: relative;

  display: block;

  max-width: 700px;

  margin: 0 auto;

}



@media screen and (max-width: 960px) {

  .w,

  .w11,

  .w12,

  .w13,

  .w14,

  .w70,

  .w90 {

    width: auto;

  }

}

/* ヘッダー

============================================================================================================ */

#header {


  font-size: 1.8rem;

  position: fixed;

  width: 100%;

  z-index: 999;

  background: #fff;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  height:90px;

}



#header .head {
  height:90px;
  position: relative;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between;

  margin-right: 1.5vw;
  -webkit-box-sizing: border-box;

  box-sizing: border-box;
}



#header .head_inner {

  max-width: 85%;

}



#header .head_inner_flex {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: end;

  -ms-flex-pack: end;

  justify-content: flex-end;

  /* 	height: 54px; */

  padding-top: 11px;

}



@media screen and (min-width: 961px) {

  #header {
    overflow: hidden;
  }

}


@media screen and (max-width: 960px) {

  #header {
    /*overflow: auto;*/
    position: fixed;

    height: 60px;

  }

  #header .head {

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

  }

  #header .head_inner {

    max-width: 50%;

  }

}

@media screen and (max-width: 480px) {

  #header {

    background: #fff;

  }

}

/* logo */

#header .logo {

  width: 264px;

  z-index: 999;

  position: relative;

}

#header .logo img {

  width: 100%;

}

#header .logo a {

  display: block;

}



@media screen and (max-width: 960px) {

  #header .logo {

    margin-left: 1.5vw;

    width: 183px;

  }

}

/* head_search */

.head_search {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  min-width: 380px;

}

.head_search_text_d {

  width: 16%;

  font-size: 1.6rem;

  font-weight: bold;

  letter-spacing: 1px;

  color: #000;

}

.head_search_form {

  width: 84%;

  margin-left: 0%;

}

.head_search_form form {

  font-size: 1.6rem;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

}

.head_search_form input[type="text"] {

  min-width: 266px;

  padding: 0 5px;

  border: solid 1px #b2b2b2;

}

.head_search_form input[type="image"] {

  width: 65px;

  height: 30px;

}

.head_search_form input::-webkit-input-placeholder {

  font-size: 1.4rem;
  position: relative;
  top: -2px;

}

.head_search_form input::-moz-placeholder {

  font-size: 1.4rem;

}

.head_search_form input:-ms-input-placeholder {

  font-size: 1.4rem;

}

.head_search_form input::-ms-input-placeholder {

  font-size: 1.4rem;

}

.head_search_form input::placeholder {

  font-size: 1.4rem;

}



@media all and (-ms-high-contrast: none) {

  .head_search_form input[type="image"] {

    width: 65px;

    height: 30px;

  }

}

@media screen and (max-width: 960px) {

  .head_search {

    max-width: 90%;

    margin: auto;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

  }

  .head_search_form {

    width: auto;

  }

  .head_search_form input[type="text"] {

    min-width: 150px;

  }

  .head_search_form input::-webkit-input-placeholder {

    font-size: 1rem;

  }

  .head_search_form input::-moz-placeholder {

    font-size: 1rem;

  }

  .head_search_form input:-ms-input-placeholder {

    font-size: 1rem;

  }

  .head_search_form input::-ms-input-placeholder {

    font-size: 1rem;

  }

  .head_search_form input::placeholder {

    font-size: 1rem;

  }

	.head_search_form input[type="text"]::placeholder {
	  font-size: 11px;
	}

  .head_search_text_d {

    width: auto;

    margin-right: 3%;

  }

  .head_search_form input[type="image"] {

    width: 40px;
    height: 30px;
    object-fit: cover;
  }

}

@media screen and (max-width: 480px) {

  .head_search {

    display: block;

    min-width: 0;

    text-align: center;

  }

  .head_search_form {

    width: auto;

  }

  .head_search_form input[type="text"] {

    min-width: 100px;

  }

	.head_search_form input[type="text"]::placeholder {
	  font-size: 11px;
	}


  .head_search_form form {

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

  }

  .head_search_form input::-webkit-input-placeholder {

    font-size: 1rem;

  }

  .head_search_form input::-moz-placeholder {

    font-size: 1rem;

  }

  .head_search_form input:-ms-input-placeholder {

    font-size: 1rem;

  }

  .head_search_form input::-ms-input-placeholder {

    font-size: 1rem;

  }

  .head_search_form input::placeholder {

    font-size: 1rem;

  }

  .head_search_text_d {

    font-size: 1.4rem;

    margin-right: auto;

  }

  .head_search_form input[type="image"] {

    width: 40px;
    height: 30px;
    object-fit: cover;
  }

}

/* login */

.login > * {

  border-radius: 20px;

  display: block;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  border: 1px solid #ff0000;

  padding: 3px 8px;

  color: #ffffff;

  background: #ff0000;

  font-size: 1.3rem;

  letter-spacing: 1px;

  -webkit-transition: 0.3s;

  transition: 0.3s;

  min-width: 110px;

  text-align: center;

}

.login_disa > * {
  border-radius: 20px;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #666666;
  padding: 3px 8px;
  color: #ffffff;
  background: #666666;
  font-size: 1.3rem;
  letter-spacing: 1px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  min-width: 110px;
  text-align: center;
}

.login > *:hover {

  background: #ffffff;

  color: #ff0000;

  border: solid 1px #ff0000;

  opacity: 1 !important;

  -webkit-box-shadow: none;

  box-shadow: none;

  -webkit-transform: translateY(5px);

  transform: translateY(5px);

}



@media screen and (max-width: 960px) {

  .login {

    width: 150px;

    margin: auto auto 1em auto;

    text-align: center;

  }

  .login_disa {

    width: 150px;

    margin: auto auto 1em auto;

    text-align: center;

  }

}

/* item_flex */

.item_flex {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  position: relative;

  right: 1.5vw;

  min-width: 238px;

}



@media screen and (max-width: 960px) {

  .item_flex {

    -webkit-box-pack: end;

    -ms-flex-pack: end;

    justify-content: flex-end;

    position: relative;

    top: auto;

    right: auto;

    /* min-width: 314px; */

    margin-top: -10px;

  }

}

.lang_list {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  margin-left: 10%;

}

.lang_list p > * {

  -webkit-transition: 0.3s;

  transition: 0.3s;

  display: block;

  position: relative;

  color: #1d61a4;

  padding: 5px 10px;

  font-weight: bold;

  font-size: 1.2rem;

  letter-spacing: 1px;

}

.lang_list p > *:hover {

  color: #00bbb4;

}

.lang_list p > *:before {

  content: "";

  position: absolute;

  background: #1d61a4;

  top: 50%;

  -webkit-transform: translate(0%, -50%);

  transform: translate(0%, -50%);

  right: 0;

  width: 1px;

  height: 2em;

}

.lang_list p:last-child > *:before {

  content: none;

}



@media screen and (max-width: 960px) {

  .lang_list {

    margin-right: 12vw;

  }

}

@media screen and (max-width: 480px) {

  .lang_list {

    margin-right: 13vw;

  }

}

/* sp_head_contents */

.sp_head_contents {

  display: none;

}



@media screen and (max-width: 960px) {

  #header .head_inner_flex .head_search,

  #header .head_inner_flex .login {

    display: none;

  }

  .sp_head_contents {

    display: block;

    background: rgb(255, 255, 255);

    padding: 20px 0;

    border-bottom: 1px solid black;

    width: 70%;

    margin-left:auto;

  }

}

/* globalnavi 

---------------------------------------------------------------------------*/

@media screen and (min-width: 961px) {

  #header nav #global {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: end;

    -ms-flex-pack: end;

    justify-content: flex-end;

  }

  #header nav #global > li {

    position: relative;

    z-index: 2;

  }

  #header nav #global > li a {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    padding: 0px 0.5vw 0px 0.5vw;

    height: 48px;

    position: relative;

    letter-spacing: 1px;

    color: #333;

    letter-spacing: 1px;

    font-size: 1.6rem;

    font-weight: normal;

  }

  #header nav #global > li a:after {

    content: "";

    position: absolute;

    bottom: -4px;

    left: 0;

    width: 100%;

    height: 0px;

    background: #1d61a4;

    opacity: 0;

    visibility: hidden;

    -webkit-transition: all 0.3s ease;

    transition: all 0.3s ease;

  }

  #header nav #global > li a:hover {

    opacity: 0.9;

  }

  #header nav #global > li a:hover:after,

  #header nav #global > li.current a:after,

  #header nav #global > li.open a:after {

    bottom: 0px;

    opacity: 1;

    visibility: visible;

    height: 1px;

  }

  #header nav #global > li.navi_color a {

    padding: 0 2vw;

    background: #eaeaea;

    -webkit-transition: all 0.5s linear;

    transition: all 0.5s linear;

  }

  #header nav #global > li.navi_color a:after {

    content: none;

  }

  #header nav #global > li.navi_color a:before {

    content: "";

    position: relative;

    margin: auto;

    top: 0;

    bottom: 0;

    left: -6px;

    width: 4px;

    height: 4px;

    -webkit-transform: rotate(45deg);

    transform: rotate(45deg);

  }

  #header nav #global > li.navi_color a:hover {

    background: #e0dfde;

  }

  #header nav #global ul {

    position: absolute;

    left: 0;

    top: 70px; /*高さ-10px*/

    height: 0;

    overflow: hidden;

    opacity: 0;

    z-index: 10;

    min-width: 100%;

    /* 開発 */

    /* 	overflow: visible;

    opacity: 1;

    height: auto; */

    -webkit-transition: all 0.15s ease;

    transition: all 0.15s ease;

  }

  #header nav #global ul li a {

    background: #f2f2f2;

    padding: 0.8em 1.5em;

    height: auto;

    min-width: 100%;

    white-space: nowrap;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

  }

  #header nav #global ul li a:after {

    content: none;

  }

  #header nav #global ul li a:hover {

    text-decoration: underline;

    opacity: 1;

  }

  #header nav #global li:hover ul {

    overflow: visible;

    opacity: 1;

    height: auto;

    top: 80px;

  }

  #header nav .nav_down {

    display: none;

  }

}

@media screen and (max-width: 1100px) {

  #header nav #global a {

    font-size: 1.4vw;

  }

}

@media screen and (max-width: 960px) {

  #header nav #global {

    display: block;

    margin-right: 0;

    font-size: 1.4rem;

    width:70%;

    margin-left:auto;

  }

  #header nav #global > li {

    position: relative;

  }

  #header nav #global a {

    font-size: 1.6vw;

  }

  #header nav #global > li a {

    display: block;

    padding: 1.25em 2em;

    height: auto;

    position: relative;

    text-align: left;

  }

  #header nav #global > li a:after {

    content: "";

    position: absolute;

    margin: auto;

    top: 0;

    bottom: 0;

    right: 12px;

    width: 5px;

    height: 5px;

    border-top: 1px solid #5a5a5a;

    border-right: 1px solid #5a5a5a;

    -webkit-transform: rotate(45deg);

    transform: rotate(45deg);

  }

  #header nav #global > li.has_snav > a:after {

    content: none;

  }

  #header nav #global ul {

    height: 0;

    visibility: hidden;

    opacity: 0;

    -webkit-transition: all 0.2s;

    transition: all 0.2s;

  }

  #header nav #global ul.open {

    height: auto;

    visibility: visible;

    opacity: 1;

  }

  /* plus icon */

  #header nav .nav_down {

    position: absolute;

    right: 0;

    top: 25px;

    width: 30px;

    height: 30px;

    margin-top: -26px;

    z-index: 10;

  }

  #header nav #global .has_snav > .nav_down:after {

    content: "";

    display: block;

    position: absolute;

    left: auto;

    bottom: auto;

    right: 9px;

    top: 50%;

    width: 13px;

    height: 1px;

    margin-top: -1px;

    background-color: #5a5a5a;

    -webkit-transition: all 0.2s;

    transition: all 0.2s;

  }

  #header nav #global .has_snav > .nav_down:before {

    content: "";

    display: block;

    position: absolute;

    left: auto;

    bottom: auto;

    right: 15px;

    top: 50%;

    width: 1px;

    height: 13px;

    background-color: #5a5a5a;

    margin-top: -7px;

  }

  #header nav #global .has_snav > .nav_down.open:before {

    -webkit-transform: translateY(0) rotate(90deg);

    transform: translateY(0) rotate(90deg);

  }

}

@media screen and (max-width: 480px) {

  #header nav #global a {

    font-size: 1.3rem;

  }

  #header nav #global > li a {

    padding: 1em 2em;

  }

}

/* お問い合わせ 

---------------------------------------------------------------------------*/

@media screen and (min-width: 961px) {

  #header .head {

    padding-right: 4vw;

  }

  #header .head_inner_flex {

    padding-right: 2vw;

  }

  #header nav #global > li.nav_contact a:after {

    content: none;

  }

  .nav_contact {
    position: absolute;
    top: -41px;
    right: -1vw!important;
    height:90px!important;
    width: 116px;

  }

  .nav_contact a {


  height: 100%!important;

    background: url(../images/contact_bg.svg) no-repeat!important;
    background-size: cover;
    color: #fff !important;

    padding: 0px 1vw 0 75px!important;

    width: 100%;

    text-align: end;

    display: flex!important;

    justify-content: center;

    align-items: center;

  }

  /* .nav_contact a:before {

    position: absolute;

    content: "";

    border: 83px solid transparent;

    border-left: 115px solid #04143b;

    top: -8%;

    left: -82px;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    -webkit-transform:rotate(-90deg);

    transform:  rotate(-90deg);

    z-index: -1;

    top:-92px;

  } */

}
@media screen and (max-width: 1800px) {
  .nav_contact {

    /*right: 0!important;*/

  }


}
@media screen and (max-width: 1450px) {

  #header .head {

    padding-right: 6vw;

  }

  #header .head_inner_flex {

    padding-right: 4vw;

  }

/*
  .nav_contact {
    position: absolute;
    top: -41px;
    right: -0.6vw!important;
    height:90px!important;
    width: 116px;

  }
*/

}

@media screen and (max-width: 960px) {

  #header .head {

    padding-right: 0;

  }

  #header .head_inner_flex {

    padding-right: 0;

  }

  .nav_contact {

    right: auto;
    width: 100%;
    position: absolute;
    right: -0.6vw!important;
    height:90px!important;

  }

}

/* nav ハンバーガー

------------------------------------------------------------- */

#header .nav_btn {

  display: none;

}



@media screen and (max-width: 960px) {

  #header nav {

    position: fixed;

    /*		overflow: hidden;*/

    height: 0;

    top: 60px;

    right: 0;

    width: 100%;

    pointer-events: none;

    opacity: 0;

    visibility: hidden;

    -webkit-transition: all 0.3s ease;

    transition: all 0.5s ease;

    z-index: 900;

  }

  #header nav > div {

    height: 100%;

    overflow-y: scroll;

    -webkit-overflow-scrolling: touch;

  }

  #header nav > div > div {

    height: 100%;

    overflow-y: auto;

    pointer-events: auto;

  }

  #header nav #global {

    background: rgb(255, 255, 255);
    /* background: $bg_gray; */

  }

  #header nav #global ul li {

    background: #eaeaea;

  }

  #header .nav_btn {

    display: block;

    position: absolute;

    right: 0;

    top: 0;

    z-index: 10;

  }

  #header .nav_btn a {

    position: relative;

    display: block;

    width: 60px;

    height: 60px;

    z-index: 2;

  }

  #header .nav_btn:before,

  #header .nav_btn a:before,

  #header .nav_btn a:after {

    content: "";

    position: absolute;

    left: 15px;

    right: 15px;

    top: 50%;

    border-radius: 100px;

    height: 3px;

    margin-top: -1px;

    background-color: #1d61a4;

    -webkit-transition: all 0.2s;

    transition: all 0.2s;

  }

  #header .nav_btn a:before {

    -webkit-transform: translateY(-8px);

    transform: translateY(-8px);

  }

  #header .nav_btn a:after {

    -webkit-transform: translateY(8px);

    transform: translateY(8px);

  }

  /* open */

  #header.open nav {

    opacity: 1;

    visibility: visible;

    /*    width: 100%;*/

    height: 100%;

    height: calc(100% - 60px);

  }

  #header.open .nav_btn:before {

    opacity: 0;

  }

  #header.open .nav_btn a:before {

    -webkit-transform: translateY(0) rotate(45deg);

    transform: translateY(0) rotate(45deg);

  }

  #header.open .nav_btn a:after {

    -webkit-transform: translateY(0) rotate(-45deg);

    transform: translateY(0) rotate(-45deg);

  }

}

/* fixed

------------------------------------------------------------- */

#header.fixed {

  border-bottom: solid 1px #f2f2f2;

  background: rgba(255, 255, 255, 1.0);

}



#header.fixed nav #global > li a {

  color: #333;

}



@media screen and (max-width: 960px) {

  #header.fixed {

    background: rgb(255, 255, 255);

  }

}

/* footer

============================================================================================================ */

.foot {

  letter-spacing: 1px;

  font-size: 1.4rem;

  line-height: 1.8;

  color: #fff;

}

.foot_bg {

  padding: 40px 0;

  background: #232323;

}

.foot_flex {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between;

}

.foot_logo {

  width: 214px;

  margin-bottom: 20px;

}

.foot_logo img {

  width: 100%;

}

.foot .com_name {

  font-size: 1.8rem;

  margin-bottom: 20px;

}

.foot_info {

  width: 30%;

}

.foot_sitemap {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between;

  width: 55%;

  margin-left: 5%;

}

.foot_sitemap a {

  color: #fff;

}

.foot_sitemap > ul {

  padding: 0 0 0 40px;

}

.foot_sitemap > ul:last-child {

  border-left: 1px solid #fff;

}

.foot_sitemap > ul > li + li {

  margin-top: 8px;

}



@media screen and (max-width: 960px) {

  .foot_info {

    width: 35%;

  }

  .foot_sitemap {

    width: 60%;

  }

  .foot_sitemap > ul {

    padding: 0 0 0 20px;

  }

}

@media screen and (max-width: 680px) {

  .foot {

    font-size: 1.4rem;

  }

  .foot_bg {

    padding: 40px 0;

  }

  .foot_flex {

    display: block;

  }

  .foot_logo {

    width: 214px;

    margin-bottom: 20px;

  }

  .foot .com_name {

    font-size: 1.8rem;

    margin-bottom: 20px;

  }

  .foot_info {

    width: auto;

  }

  .foot_sitemap {

    width: auto;

    margin-left: auto;

    margin-top: 5%;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

  }

  .foot_sitemap > ul {

    margin-bottom: 5%;

    width: 48%;

    padding: 0 0 0 0px;

  }

  .foot_sitemap > ul:last-child {

    border-left: none;

  }

}

@media screen and (max-width: 480px) {

  .foot {

    font-size: 1.4rem;

  }

  .foot_bg {

    padding: 30px 0 20px 0;


  }

  .foot_logo {

    width: 214px;

  }

  .foot .com_name {

    font-size: 1.8rem;

  }

  .foot_sitemap {

    margin-top: 15%;

  }

}

/* copyright

------------------------------------------------------------- */

.copyright {

  display: block;

  padding: 10px 0;

  font-size: 1.2rem;

  text-align: center;

  background: #1d61a4;

  /* letter-spacing: 3px; */

}



@media screen and (max-width: 960px) {

  .copyright {

    font-size: 1rem;

  }

}

/* .page_top

------------------------------------------------------------- */

.page_top {

  position: fixed;

  bottom: 0;

  right: 0;

}



.page_top a {

  display: block;

  background: #1d61a4;

  width: 75px;

  height: 75px;

  position: relative;

  color: #fff;

  text-align: center;

  z-index: 999;

}

.page_top a span {

  position: absolute;

  bottom: 5px;

  left: 50%;

  -webkit-transform: translate(-50%, 0%);

  transform: translate(-50%, 0%);

}



.page_top a:hover {

  opacity: 0.8;

}



.page_top a:after {

  position: absolute;

  content: "";

  vertical-align: middle;

  right: 0;

  left: 0;

  top: -13px;

  bottom: 0;

  margin: auto;

  width: 14px;

  height: 14px;

  border-top: 2px solid #fff;

  border-right: 2px solid #fff;

  -webkit-transform: rotate(-45deg);

  transform: rotate(-45deg);

}



@media screen and (max-width: 960px) {

  .page_top a {

    width: 50px;

    height: 48px;

    font-size: 1rem;

  }

}

.ScrollTop {

  opacity: 0;

  z-index: -3;

  -webkit-transition: all 0.65s;

  transition: all 0.65s;

}



.ScrollTop.isActive {

  opacity: 1;

  z-index: 0;

}



/* cv

============================================================================================================ */

.cv {

  text-align: center;

  overflow: hidden;

}

.cv_bg {

  background: #04143b url(../images/cv_bg.jpg) no-repeat;

  background-size: 60%;

  background-position: right;

  overflow: hidden;

}

.cv_area {

  overflow: visible !important;

  letter-spacing: 2px;

}

.cv_area .text_box {

  position: relative;

  background: #04143b;

  width: 40%;

  padding: 20px 0 30px 0px;

  color: #fff;

}

.cv_area .text_box::before {

  content: "";

  background: url(../images/tri_blue.svg) no-repeat;

  background-size: cover;

  width: 162px;

  height: 292px;

  position: absolute;

  top: 0;

  right: -162px;

}

.cv_title {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  letter-spacing: 3px;

  margin-bottom: 10px;

}

.cv_title .en {

  font-weight: bold;

  font-size: 3.6rem;

  margin-right: 10px;

}

.cv_title .ja {

  font-size: 1.4rem;

  border: solid 1px #fff;

  padding: 2px 10px;

}



@media screen and (max-width: 1440px) {



  .cv_area {

    letter-spacing: 2px;

  }

  .cv_area .text_box {

    padding: 1vw 0 2vw 80px;

  }

}

@media screen and (max-width: 960px) {

  .cv_area {

    letter-spacing: 2px;

  }

  .cv_title .en {

    font-size: 2.8rem;

  }

}

@media screen and (max-width: 720px) {

  .cv {

    display: block;

  }

  .cv_bg {

    background: #04143b url(../images/cv_bg.jpg) no-repeat;

    background-size: 100%;

    background-position: bottom;

    padding-bottom: 150px;

  }

  .cv_area .text_box {

    width: 100%;

    padding: 40px 0 50px 0px;

  }

  .cv_area .text_box::before {

    content: normal;

  }

  .cv_title {

    display: block;

    margin-bottom: 10px;

  }

  .cv_title > * {

    display: block;

  }

  .cv_title .en {

    font-weight: bold;

    font-size: 3.6rem;

    margin-right: auto;

  }

  .cv_title .ja {

    font-size: 1.4rem;

    margin: 10px auto 15px auto;

    max-width: 100px;

  }

}



/* cv_text_pop */

.cv_text_pop {

  font-size: 1.6rem;

  color: #fff;

  padding: 0.5em 1em;

  position: relative;

  line-height: 1.4;

}

.cv_text_pop span {

  z-index: 1;

  position: relative;

}

.cv_text_pop:before {

  content: "";

  width: 100%;

  height: 100%;

  transform: skewX(-25deg);

  position: absolute;

  top: 0;

  z-index: 0;

  background: linear-gradient(45deg, rgba(247, 163, 62, 1) 0%, rgba(242, 114, 23, 1) 34%);

  left: 0;

}



.cv_text_pop_s {

  margin-top: 0.5em;

}



@media screen and (max-width: 680px) {

  .cv_text_pop {

    width: 80%;

    margin: auto;

  }

}



.cv_area .text_box > * {

  position: relative;

  z-index: 3;

}

.cv_area .text_box::before {

  width: 130% !important;

  height: 100% !important;

  right: -30% !important;

  background: #04143b !important;

  transform: skewX(-25deg);

}



.cv_area .text_box::after {

  content: "";

  background: #04143b;

  width: 500%;

  height: 100%;

  left: -500%;

  top: 0;

  position: absolute;

  z-index: 1;

}



@media screen and (max-width: 680px) {

  .cv_area .text_box {

    margin-left: auto;

  }

}



/* model_number cv__ 型番から探す

============================================================================================================ */

.model_number {

  background: #515151;

  padding: 40px 0;

  font-size: 2.3rem;

}

.model_number_title {

  text-align: center;

  position: relative;

  font-size: 1.8rem;

  color: #fff;

  letter-spacing: 1px;

  margin: auto auto 18px auto;

  display: inline-block;

  font-family: "Roboto", sans-serif;

  font-style: italic;

  z-index: 1;

}

.model_number_title:before {

  z-index: -1;

  content: "";

  position: absolute;

  width: 180%;

  height: 4rem;

  background: #444444;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%) skew(-30deg);

  transform: translate(-50%, -50%) skew(-30deg);

}

.model_number_flex {

  max-width: 930px;

  margin: auto;

}

.model_number_list {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  -webkit-transition: scale(2) 0.3s;

  transition: scale(2) 0.3s;

  -webkit-box-pack: start;

  -ms-flex-pack: start;

  justify-content: flex-start;

}

.model_number_list a {

  font-size: 1.9rem;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  display: block;

  color: #fff;

  font-family: "Roboto", sans-serif;

  font-style: italic;

  position: relative;

  padding: 5px 6px;

}

.model_number_list a:before {

  position: absolute;

  content: "";

  background: #fff;

  height: 1px;

  width: 100%;

  bottom: -5px;

  left: 0;

  -webkit-transition: all 0.3s ease;

  transition: all 0.3s ease;

  opacity: 0;

}

.model_number_list a:hover:before {

  bottom: 0px;

  opacity: 1;

}



@media screen and (max-width: 1000px) {

  .model_number {

    padding: 30px 0;

  }

  .model_number_flex {

    max-width: 95%;

    margin: auto;

  }

  .model_number_list a {

    padding: 3px 5px;

  }

}

/* topic_path

============================================================================================================ */

.topic_path li {

  font-size: 1.2rem;

  display: inline-block;

}



.topic_path li a {

  margin-right: 2em;

  position: relative;

}

.topic_path li a:hover {

  color: #00bbb4;

}



.topic_path li a:after {

  content: "";

  background: #5a5a5a;

  width: 1em;

  height: 1px;

  position: absolute;

  right: -1.5em;

  top: 50%;

  -webkit-transform: translate(-50% 0);

  transform: translate(-50% 0);

}



@media screen and (min-width: 960px) {

  .topic_path {

    background: #ffffff;

    padding: 10px 0;

    margin-bottom: 0px;

    position: relative;

    z-index: 1;

  }

}

@media screen and (max-width: 1200px) {

  .topic_path ul {

    max-width: 95%;

    max-width: auto;

  }

}

/*topic_path sp */

@media screen and (max-width: 960px) {

  /*追従あり*/

  .topic_path {

    padding: 5px 0;

    margin-top: 0em;

    margin-bottom: 0;

    position: relative;

    z-index: 1;

    white-space: nowrap;

    height: 20px;

    overflow: hidden;

    font-size: 1.2rem;

    -webkit-overflow-scrolling: touch;

  }

  .topic_path:after {

    display: block;

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    width: 20px;

    height: 100%;

    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#fff));

    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);

  }

  .topic_path ul {

    white-space: nowrap;

    overflow-x: auto;

    overflow-y: hidden;

    height: 21px;

    -webkit-transform: translateZ(0);

    transform: translateZ(0);

  }

  .topic_path ul li:last-child {

    margin-right: 20px;

  }

}

@media screen and (max-width: 480px) {

  .topic_path {

    font-size: 1rem;

  }

}

/* コンテナ

============================================================================================================ */

#container {

  position: relative;

  font-size: 16px;

  font-size: 1.6rem;

  padding-top: 90px;

}



#container a:hover {

  opacity: 0.8;

}



@media screen and (max-width: 960px) {

  #container {

    font-size: 1.3rem;

    padding-top: 60px;

  }

}

/* section

============================================================================================================ */

.section + .section {

  margin-top: 100px;

}



.section_m + .section_m {

  margin-top: 60px;

}



.section_s + .section_s {

  margin-top: 50px;

}



@media screen and (max-width: 1200px) {

  .sp_section {

    max-width: 95%;

    margin: auto;

  }

}

@media screen and (max-width: 960px) {

  .section + .section {

    margin-top: 60px;

  }

  .section_m + .section_m {

    margin-top: 40px;

  }

  .section_s + .section_s {

    margin-top: 30px;

  }

}

@media screen and (max-width: 680px) {

  .section + .section {

    margin-top: 40px;

  }

  .section_m + .section_m {

    margin-top: 30px;

  }

  .section_s + .section_s {

    margin-top: 25px;

  }

}

/* padding

============================================================================================================ */

.pd_ll {

  padding-top: 100px;

  padding-bottom: 100px;

}



.pdt_ll {

  padding-top: 100px;

}



.pdb_ll {

  padding-bottom: 100px;

}



.pd_l {

  padding-top: 50px;

  padding-bottom: 70px;

}



.pdt_l {

  padding-top: 70px;

}



.pdb_l {

  padding-bottom: 70px;

}



.pd_m {

  padding-top: 50px;

  padding-bottom: 50px;

}



.pdt_m {

  padding-top: 50px;

}



.pdb_m {

  padding-bottom: 50px;

}



.pd_s {

  padding-top: 40px;

  padding-bottom: 40px;

}



.pdt_s {

  padding-top: 40px;

}



.pdb_s {

  padding-bottom: 40px;

}



.pd_ss {

  padding-top: 20px;

  padding-bottom: 20px;

}



.pdt_ss {

  padding-top: 20px;

}



@media screen and (max-width: 1200px) {

  .pd_ll {

    padding-top: 8vw;

    padding-bottom: 8vw;

  }

  .pdt_ll {

    padding-top: 8vw;

  }

  .pdb_ll {

    padding-bottom: 8vw;

  }

}

@media screen and (max-width: 960px) {

  .pd_ll {

    padding-top: 10vw;

    padding-bottom: 10vw;

  }

  .pdt_ll {

    padding-top: 10vw;

  }

  .pdb_ll {

    padding-bottom: 10vw;

  }

  .pd_l {

    padding-top: 50px;

    padding-bottom: 50px;

  }

  .pdt_l {

    padding-top: 50px;

  }

  .pdb_l {

    padding-top: 50px;

  }

  .pd_m {

    padding-top: 35px;

    padding-bottom: 35px;

  }

  .pdt_m {

    padding-top: 35px;

  }

  .pdb_m {

    padding-bottom: 35px;

  }

  .pd_s {

    padding-top: 20px;

    padding-bottom: 20px;

  }

  .pdb_s {

    padding-bottom: 20px;

  }

  .pd_ss {

    padding-top: 15px;

    padding-bottom: 15px;

  }

  .pdt_ss {

    padding-top: 15px;

  }

}

/* margin

============================================================================================================ */

.mg_ll {

  padding-top: 80px;

  padding-bottom: 80px;

}



.mg_l {

  padding-top: 70px;

  padding-bottom: 70px;

}



.mgt_l {

  padding-top: 60px;

}



.mg_m {

  padding-top: 60px;

  padding-bottom: 60px;

}



.mg_s {

  padding-top: 30px;

  padding-bottom: 30px;

}



.mg_ss {

  padding-top: 15px;

  padding-bottom: 15px;

}



@media screen and (max-width: 1200px) {

  .mg_ll {

    padding-top: 8vw;

    padding-bottom: 8vw;

  }

}

@media screen and (max-width: 960px) {

  .mg_l {

    padding-top: 60px;

    padding-bottom: 60px;

  }

  .mgt_l {

    padding-top: 60px;

  }

  .mg_m {

    padding-top: 35px;

    padding-bottom: 35px;

  }

  .mg_s {

    padding-top: 20px;

    padding-bottom: 20px;

  }

  .mg_ss {

    padding-top: 10px;

    padding-bottom: 10px;

  }

}

/* btn

============================================================================================================ */

.btn > * {

  border: solid 1px transparent;

  display: -webkit-inline-box;

  display: -ms-inline-flexbox;

  display: inline-flex;

  padding: 0.5em 1.5em;

  color: #fff;

  letter-spacing: 2px;

  -webkit-transition: 0.3s;

  transition: 0.3s;

  /* border-radius: 5px; */

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  background: #00bbb4;

  font-size: 1.6rem;

  position: relative;

  line-height: 1.5;

  border-radius: 0;

  /* box-shadow: 0px 0px 15px -5px #474747; */

}

.btn > *:hover {

  background: #fff;

  color: #00bbb4;

  border: solid 1px #00bbb4;

  opacity: 1 !important;

  -webkit-box-shadow: none;

  box-shadow: none;

  -webkit-transform: translateY(5px);

  transform: translateY(5px);

}



/*arrow

-------------------------------------*/

.btn_arrow {

  padding: 13px 50px 13px 40px !important;

}

.btn_arrow:after {

  content: "";

  background: url("../images/arrow_ff.svg") no-repeat;

  background-size: contain;

  position: absolute;

  top: 55%;

  -webkit-transform: translate(0%, -50%);

  transform: translate(0%, -50%);

  width: 8px;

  height: 16px;

  right: 15px;

}

.btn_arrow:hover:after {

  background: url("../images/arrow_green.svg") no-repeat;

}



.btn_arrow_tri {

  padding: 13px 50px !important;

}

.btn_arrow_tri:after {

  content: "";

  background: url("../images/btn_arrow_tri.svg") no-repeat;

  background-size: contain;

  position: absolute;

  top: 55%;

  -webkit-transform: translate(0%, -50%);

  transform: translate(0%, -50%);

  width: 8px;

  height: 16px;

  right: 15px;

}

.btn_arrow_tri:hover:after {

  background: url("../images/btn_arrow_tri.svg") no-repeat;

}



.btn_arrow_input {

  position: relative;

}

.btn_arrow_input > * {

  padding: 0.5em 50px !important;

}

.btn_arrow_input:after {

  content: "";

  background: url("../images/arrow_ff.svg") no-repeat;

  background-size: contain;

  position: absolute;

  top: 55%;

  -webkit-transform: translate(0%, -50%);

  transform: translate(0%, -50%);

  width: 8px;

  height: 16px;

  right: 15px;

  z-index: 2;

  -webkit-transition: 0.3s;

  transition: 0.3s;

  top: 60%;

}

.btn_arrow_input:hover:after {

  background: url("../images/arrow_green.svg") no-repeat;

  -webkit-transform: translateY(0px);

  transform: translateY(0px);

}



.btn_arrow_input_pink {

  position: relative;

}

.btn_arrow_input_pink > * {

  padding: 0.5em 50px !important;

}

.btn_arrow_input_pink:after {

  content: "";

  background: url("../images/arrow_ff.svg") no-repeat;

  background-size: contain;

  position: absolute;

  top: 55%;

  -webkit-transform: translate(0%, -50%);

  transform: translate(0%, -50%);

  width: 8px;

  height: 16px;

  right: 15px;

  z-index: 2;

  -webkit-transition: 0.3s;

  transition: 0.3s;

  top: 60%;

}

.btn_arrow_input_pink:hover:after {

  background: url("../images/arrow_red.svg") no-repeat;

  -webkit-transform: translateY(0px);

  transform: translateY(0px);

}


.btn_arrow_input_blue {

  position: relative;

}

.btn_arrow_input_blue > * {

  padding: 0.5em 50px !important;

}

.btn_arrow_input_blue:after {

  content: "";

  background: url("../images/arrow_ff.svg") no-repeat;

  background-size: contain;

  position: absolute;

  top: 55%;

  -webkit-transform: translate(0%, -50%);

  transform: translate(0%, -50%) rotate(90deg);

  width: 8px;

  height: 16px;

  right: 15px;

  z-index: 2;

  -webkit-transition: 0.3s;

  transition: 0.3s;

  top: 60%;

}

.btn_arrow_input_blue:hover:after {

  background: url("../images/arrow_blue.svg") no-repeat;

  -webkit-transform: translateY(0px);
  
  transform: translateY(0px) rotate(90deg);

}


/* 左 */

.btn_arrow_input.arrow_back {

  position: relative;

  display: block;

}

.btn_arrow_input.arrow_back > * {

  padding: 0.5em 50px !important;

}

.btn_arrow_input.arrow_back:after {

  content: "";

  background: url("../images/arrow_ff.svg") no-repeat;

  background-size: contain;

  position: absolute;

  top: 55%;

  -webkit-transform: translate(0%, -50%);

  transform: translate(0%, -50%);

  width: 12px;

  height: 12px;

  left: 15px;

  -webkit-transform: translate(0%, -50%) rotate(180deg);

  transform: translate(0%, -50%) rotate(180deg);

  z-index: 2;

}

.btn_arrow_input.arrow_back:hover:after {

  background: url("../images/arrow_gray.svg") no-repeat;

  -webkit-transform: translateY(0px) rotate(180deg);

  transform: translateY(0px) rotate(180deg);

}


/* plus ico */

.btn_line_blue > * {

  border: solid 1px #0080e5;

  display: -webkit-inline-box;

  display: -ms-inline-flexbox;

  display: inline-flex;

  padding: 0.5em 1.5em;

  color: #0080e5;

  letter-spacing: 2px;

  -webkit-transition: 0.3s;

  transition: 0.3s;

  /* border-radius: 5px; */

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  background: #fff;

  font-size: 1.6rem;

  position: relative;

  line-height: 1.5;

  border-radius: 0;

  /* box-shadow: 0px 0px 15px -5px #474747; */

  width: 238px;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

}

.btn_line_blue > *:hover {

  background: #0080e5;

  color: #fff;

  border: solid 1px #0080e5;

  opacity: 1 !important;

  -webkit-box-shadow: none;

  box-shadow: none;

  -webkit-transform: translateY(5px);

  transform: translateY(5px);

}



.btn_plus_arrow {

  position: relative;

}

.btn_plus_arrow:after {

  content: "";

  background: url("../images/more_02.svg") no-repeat;

  background-size: contain;

  position: absolute;

  top: 50%;

  -webkit-transform: translate(0%, -50%);

  transform: translate(0%, -50%);

  width: 19px;

  height: 19px;

  right: 20px;

  right: 7px !important;

}

.btn_plus_arrow:hover:after {

  content: "";

  background: url("../images/more_02_ff.svg") no-repeat;

  background-size: contain;

  position: absolute;

  top: 50%;

  -webkit-transform: translate(0%, -50%);

  transform: translate(0%, -50%);

  width: 19px;

  height: 19px;

  right: 20px;

}



/* more */

.more > * {

  padding: 0 20px 0 0;

  position: relative;

}

.more > *:before {

  content: "";

  background: url("../images/arrow_blue.svg") no-repeat;

  background-size: contain;

  position: absolute;

  top: 55%;

  -webkit-transform: translate(0%, -50%);

  transform: translate(0%, -50%);

  width: 12px;

  height: 12px;

  right: 15px;

  right: 0 !important;

}

.more .more_s {

  font-size: 1.3rem;

}



/*btn カラー colr___

----------------------------------------*/

.btn_gray > * {

  border: solid 1px transparent;

  display: -webkit-inline-box;

  display: -ms-inline-flexbox;

  display: inline-flex;

  padding: 0.5em 1.5em;

  color: #fff;

  letter-spacing: 2px;

  -webkit-transition: 0.3s;

  transition: 0.3s;

  /* border-radius: 5px; */

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  background: #9b9999;

  font-size: 1.6rem;

  position: relative;

  line-height: 1.5;

  border-radius: 0;

  /* box-shadow: 0px 0px 15px -5px #474747; */

}

.btn_gray > *:hover {

  background: #fff;

  color: #9b9999;

  border: solid 1px #9b9999;

  opacity: 1 !important;

  -webkit-box-shadow: none;

  box-shadow: none;

  -webkit-transform: translateY(5px);

  transform: translateY(5px);

}



.btn_blue > * {

  border: solid 1px transparent;

  display: -webkit-inline-box;

  display: -ms-inline-flexbox;

  display: inline-flex;

  padding: 0.5em 1.5em;

  color: #fff;

  letter-spacing: 2px;

  -webkit-transition: 0.3s;

  transition: 0.3s;

  /* border-radius: 5px; */

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  background: -webkit-gradient(linear, left top, right top, from(#0080e5), color-stop(24%, #0080e5), to(#004e9d));

  background: linear-gradient(to right, #0080e5 0%, #0080e5 24%, #004e9d 100%);

  font-size: 1.6rem;

  position: relative;

  line-height: 1.5;

  border-radius: 0;

  /* box-shadow: 0px 0px 15px -5px #474747; */

  border: none !important;

}

.btn_blue > *:hover {

  background: -webkit-gradient(linear, left top, right top, from(#0080e5), color-stop(24%, #0080e5), to(#004e9d));

  background: linear-gradient(to right, #0080e5 0%, #0080e5 24%, #004e9d 100%);

  color: #fff;

  border: solid 1px transparent;

  opacity: 1 !important;

  -webkit-box-shadow: none;

  box-shadow: none;

  -webkit-transform: translateY(5px);

  transform: translateY(5px);

  border: none !important;

}

.btn_blue .btn_arrow:hover:after {

  background: url("../images/arrow_ff.svg") no-repeat;

}



.btn_blue_l > * {

  border: solid 1px transparent;

  display: -webkit-inline-box;

  display: -ms-inline-flexbox;

  display: inline-flex;

  padding: 0.5em 1.5em;

  color: #fff;

  letter-spacing: 2px;

  -webkit-transition: 0.3s;

  transition: 0.3s;

  /* border-radius: 5px; */

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  background: -webkit-gradient(linear, left top, right top, from(rgb(1, 128, 234)), to(rgb(23, 190, 233)));

  background: linear-gradient(90deg, rgb(1, 128, 234) 0%, rgb(23, 190, 233) 100%);

  font-size: 1.6rem;

  position: relative;

  line-height: 1.5;

  border-radius: 0;

  /* box-shadow: 0px 0px 15px -5px #474747; */

  border: none !important;

}

.btn_blue_l > *:hover {

  background: -webkit-gradient(linear, left top, right top, from(rgb(1, 128, 234)), to(rgb(23, 190, 233)));

  background: linear-gradient(90deg, rgb(1, 128, 234) 0%, rgb(23, 190, 233) 100%);

  color: #fff;

  border: solid 1px transparent;

  opacity: 1 !important;

  -webkit-box-shadow: none;

  box-shadow: none;

  -webkit-transform: translateY(5px);

  transform: translateY(5px);

  border: none !important;

}

.btn_blue_l .btn_arrow:hover:after {

  background: url("../images/arrow_ff.svg") no-repeat;

}



.btn_yellow > * {

  border: solid 1px transparent;

  display: -webkit-inline-box;

  display: -ms-inline-flexbox;

  display: inline-flex;

  padding: 0.5em 1.5em;

  color: #000;

  letter-spacing: 2px;

  -webkit-transition: 0.3s;

  transition: 0.3s;

  /* border-radius: 5px; */

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  background: -webkit-gradient(

    linear,

    left top,

    right top,

    from(rgb(247, 191, 47)),

    color-stop(92%, rgb(255, 235, 62))

  );

  background: linear-gradient(90deg, rgb(247, 191, 47) 0%, rgb(255, 235, 62) 92%);

  font-size: 1.6rem;

  position: relative;

  line-height: 1.5;

  border-radius: 0;

  /* box-shadow: 0px 0px 15px -5px #474747; */

  border: none !important;

}

.btn_yellow > *:hover {

  background: -webkit-gradient(

    linear,

    left top,

    right top,

    from(rgb(247, 191, 47)),

    color-stop(92%, rgb(255, 235, 62))

  );

  background: linear-gradient(90deg, rgb(247, 191, 47) 0%, rgb(255, 235, 62) 92%);

  color: #000;

  border: solid 1px #000;

  opacity: 1 !important;

  -webkit-box-shadow: none;

  box-shadow: none;

  -webkit-transform: translateY(5px);

  transform: translateY(5px);

  opacity: 1 !important;

  border: none !important;

}

.btn_yellow .btn_arrow {

  padding: 13px 50px !important;

}

.btn_yellow .btn_arrow:after {

  content: "";

  background: url("../images/arrow_black.svg") no-repeat;

  background-size: contain;

  position: absolute;

  top: 55%;

  -webkit-transform: translate(0%, -50%);

  transform: translate(0%, -50%);

  width: 8px;

  height: 16px;

  right: 15px;

}

.btn_yellow .btn_arrow:hover:after {

  background: url("../images/arrow_black.svg") no-repeat;

}



/*bttn input

-------------------------------------*/

.btn_input input {

  border: solid 1px transparent;

  display: -webkit-inline-box;

  display: -ms-inline-flexbox;

  display: inline-flex;

  padding: 0.5em 1.5em;

  color: #fff;

  letter-spacing: 2px;

  -webkit-transition: 0.3s;

  transition: 0.3s;

  /* border-radius: 5px; */

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  background: #00bbb4;

  font-size: 1.6rem;

  position: relative;

  line-height: 1.5;

  border-radius: 0;

  /* box-shadow: 0px 0px 15px -5px #474747; */

}

.btn_input_pink input {

  border: solid 1px transparent;

  display: -webkit-inline-box;

  display: -ms-inline-flexbox;

  display: inline-flex;

  padding: 0.5em 1.5em;

  color: #fff;

  letter-spacing: 2px;

  -webkit-transition: 0.3s;

  transition: 0.3s;

  /* border-radius: 5px; */

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  background: #ff5555;

  font-size: 1.6rem;

  position: relative;

  line-height: 1.5;

  border-radius: 0;

  /* box-shadow: 0px 0px 15px -5px #474747; */

}

.btn_input_blue input {

  border: solid 1px transparent;

  display: -webkit-inline-box;

  display: -ms-inline-flexbox;

  display: inline-flex;

  padding: 0.5em 1.5em;

  color: #fff;

  letter-spacing: 2px;

  -webkit-transition: 0.3s;

  transition: 0.3s;

  /* border-radius: 5px; */

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  background: #1D61A4;

  font-size: 1.6rem;

  position: relative;

  line-height: 1.5;

  border-radius: 0;

  /* box-shadow: 0px 0px 15px -5px #474747; */

}

.btn_input input:hover {

  background: #fff;

  color: #00bbb4;

  border: solid 1px #00bbb4;

  opacity: 1 !important;

  -webkit-box-shadow: none;

  box-shadow: none;

  -webkit-transform: translateY(5px);

  transform: translateY(5px);

}

.btn_input_pink input:hover {

  background: #fff;

  color: #ff5555;

  border: solid 1px #ff5555;

  opacity: 1 !important;

  -webkit-box-shadow: none;

  box-shadow: none;

  -webkit-transform: translateY(5px);

  transform: translateY(5px);

}

.btn_input_blue input:hover {

  background: #fff;

  color: #1D61A4;

  border: solid 1px #1D61A4;

  opacity: 1 !important;

  -webkit-box-shadow: none;

  box-shadow: none;

  -webkit-transform: translateY(5px);

  transform: translateY(5px);

}

/*btn カラー colr___ input

----------------------------------------*/

.btn_input_gray input {

  border: solid 1px transparent;

  display: -webkit-inline-box;

  display: -ms-inline-flexbox;

  display: inline-flex;

  padding: 0.5em 1.5em;

  color: #fff;

  letter-spacing: 2px;

  -webkit-transition: 0.3s;

  transition: 0.3s;

  /* border-radius: 5px; */

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  background: #9b9999;

  font-size: 1.6rem;

  position: relative;

  line-height: 1.5;

  border-radius: 0;

  /* box-shadow: 0px 0px 15px -5px #474747; */

}

.btn_input_gray input:hover{

  background: #fff;
  color: #9b9999;
  border: solid 1px #9b9999;
  opacity: 1 !important;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
}



/* @media all and (-ms-high-contrast: none) {

	.btn_input input {

		display: inline-block !important;

	}

	.btn_input_gray input {

		display: inline-block !important;

	}

}

 */

/*btn size

----------------------------------------------------------------------------------------------------------------*/

.btn_s > * {

  width: 180px;

  font-size: 1.3rem;

  display: block;

}

.btn_s > *.btn_arrow {

  padding: 5px 10px !important;

}



.btn_m > * {

  width: 280px;

  display: block;

}



.btn_l > * {

  width: 400px;

  display: block;

}



@media screen and (max-width: 768px) {

  .btn_s > * {

    width: 150px;

  }

  .btn_m > * {

    width: 180px;

  }

  .btn_l > * {

    width: 280px;

  }

}

.btn_center > * {

  margin: auto;

}



.btn_right > * {

  margin: auto 0 auto auto;

}



.btn_pd_s > * {

  padding: 5px 30px;

  font-size: 1.3rem;

}



/*斜め背景　ボタン

-------------------------------------*/

.btn_lic > * {

  border: solid 1px transparent;

  display: -webkit-inline-box;

  display: -ms-inline-flexbox;

  display: inline-flex;

  padding: 0.5em 1.5em;

  color: #fff;

  letter-spacing: 1px;

  -webkit-transition: 0.3s;

  transition: 0.3s;

  /* border-radius: 5px; */

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  background: #00bbb4;

  font-size: 1.6rem;

  position: relative;

  overflow: hidden;

  overflow: hidden;

}

.btn_lic > * span {

  position: relative;

  z-index: 3;

  color: #fff;

}

.btn_lic > *:hover span {

  color: #00bbb4;

}

.btn_lic > *:before {

  content: "";

  position: absolute;

  top: 0;

  left: -130%;

  background: #fff;

  width: 120%;

  height: 100%;

  -webkit-transform: skewX(-25deg);

  transform: skewX(-25deg);

  border: 1px solid "#00bbb4";

}

.btn_lic > *:hover:before {

  /*hoverした時のアニメーション*/

  -webkit-animation: skewanime 0.5s forwards;

  animation: skewanime 0.5s forwards; /*アニｓメーションの名前と速度を定義*/

}



@-webkit-keyframes skewanime {

  100% {

    left: -10%; /*画面の見えていない左から右へ移動する終了地点*/

  }

}



@keyframes skewanime {

  100% {

    left: -10%; /*画面の見えていない左から右へ移動する終了地点*/

  }

}

.btn_fz_l {

  font-size: 1.8rem;

}



/*ボタン　真ん中

-------------------------------------*/

/* top_title

============================================================================================================ */

.diagonal_title_top {

  font-weight: bold;

  letter-spacing: 3px;

  margin-bottom: 3em;

}

.diagonal_title_top p {

  background: url(../images/title_bg.svg) no-repeat;

  background-size: contain;

  background-position: left;

  padding: 10px 0 0 50px;

  font-size: 4.5rem;

  letter-spacing: 4px;

}

.diagonal_title_top2 {
  font-weight: bold;
  letter-spacing: 3px;
  margin-bottom: 1em;
}
.diagonal_title_top2 p {
  background: url(../images/title_bg.svg) no-repeat;
  background-size: contain;
  background-position: left;
  padding: 10px 0 0 50px;
  font-size: 1.5rem;
  letter-spacing: 4px;
}

.diagonal_title_top_in {

  font-size: 2rem;

  padding: 0px 0 0 50px;

}



@media screen and (max-width: 480px) {

  .diagonal_title_top {

    letter-spacing: 3px;

    margin-bottom: 3em;

  }

  .diagonal_title_top p {

    line-height: 1.2;

    padding: 5px 0 0 36px;

    font-size: 3rem;

    letter-spacing: 4px;

  }

  .diagonal_title_top_in {

    margin-top: 15px;

    font-size: 1.6rem;

    padding: 0px 0 0 36px;

  }

}

/* title

============================================================================================================ */

.title_ll_max {

  margin-bottom: 1.5em;

  font-size: 4.2rem;

  letter-spacing: 1px;

  position: relative;

  line-height: 1.5;

}



.title_ll {

  margin-bottom: 1.5em;

  font-size: 3.4rem;

  letter-spacing: 1px;

  position: relative;

  line-height: 1.6;

}



.title_l {

  margin-bottom: 1.5em;

  font-size: 3rem;

  letter-spacing: 1px;

  position: relative;

  line-height: 1.6;

}



.title_ml {

  font-size: 2.8rem;

  margin-bottom: 1em;

  letter-spacing: 1px;

  position: relative;

  line-height: 1.6;

}



.title_m {

  font-size: 2.4rem;

  margin-bottom: 1em;

  letter-spacing: 1px;

  position: relative;

  line-height: 1.6;

}



.title_s {

  font-size: 2.2rem;

  margin-bottom: 1em;

  position: relative;

  line-height: 1.6;

}



.title_sm {

  font-size: 2rem;

  margin-bottom: 1em;

  letter-spacing: 1px;

  position: relative;

  line-height: 1.6;

}



.title_ss {

  font-size: 1.8rem;

  margin-bottom: 1em;

  position: relative;

  line-height: 1.6;

}



/* 下線　飾り */

.title_border {

  position: relative;

}



.title_border:before {

  content: "";

  position: absolute;

  width: 2em;

  height: 3px;

  bottom: -1em;

  background: #1d61a4;

  left: 0px;

  bottom: -0.5em;

}



.title_border.tac:before {

  content: "";

  position: absolute;

  width: 2em;

  height: 3px;

  bottom: -1em;

  background: #1d61a4;

  left: 50%;

  -webkit-transform: translate(-50%, 0%);

  transform: translate(-50%, 0%);

}



.title_border.tal:before {

  content: "";

  position: absolute;

  width: 2em;

  height: 3px;

  bottom: -1em;

  background: #1d61a4;

  left: 0px;

}



/* 下線　細長い */

.title_thin_line {

  position: relative;

}



.title_thin_line:before {

  content: "";

  position: absolute;

  width: 100%;

  height: 1px;

  bottom: -0.2em;

  left: 0;

  background: #1d61a4;

}



/* 左線　下線 */

.title_border_line.line_left {

  border-left: solid 5px #1d61a4;

  padding-left: 0.5em;

}



.title_border_line.line_bottom {

  border-bottom: solid 5px #1d61a4;

  padding-bottom: 1em;

}



@media screen and (max-width: 1024px) {

  .title_ll {

    font-size: 3rem;

  }

}

@media screen and (max-width: 960px) {

  .title_ll_max {

    font-size: 3rem;

  }

  .title_ll {

    font-size: 2.4rem;

  }

  .title_l {

	text-align:center;

    font-size: 1.8rem;

    margin-bottom: 1em;

  }

  .title_ml {

    font-size: 1.8rem;

    margin-bottom: 1em;

    letter-spacing: 1px;

    position: relative;

    line-height: 1.6;

  }

  .title_m {

    font-size: 1.6rem;

    margin-bottom: 1em;

  }

  .title_s {

    font-size: 1.5rem;

    margin-bottom: 1em;

  }

  .title_ss {

    font-size: 1.5rem;

    margin-bottom: 1em;

    position: relative;

  }

  .title_border:before {

    content: "";

    position: absolute;

    width: 2em;

    height: 3px;

    bottom: -1em;

    background: #1d61a4;

    left: 0px;

    bottom: -1em;

  }

}

@media screen and (max-width: 480px) {

  .title_ll_max {

    font-size: 2.4rem;

  }

  .title_ll {

    font-size: 2rem;

  }

}

/*midashi

============================================================================================================ */

.diagonal_midashi {

  font-weight: bold;

  letter-spacing: 3px;

  margin-bottom: 3em;

}

.diagonal_midashi_title {

  background: url(../images/title_bg.svg) no-repeat;

  background-size: contain;

  background-position: left;

  padding: 15px 0 10px 50px;

  font-size: 3rem;

  font-weight: normal;

  letter-spacing: 0.05em;

}

.diagonal_midashi_in {

  font-size: 2.4rem;

  padding: 0px 0 0 1rem;

}



@media screen and (max-width: 960px) {

  .diagonal_midashi {

    letter-spacing: 3px;

    margin-bottom: 3em;

  }

  .diagonal_midashi_title {

    font-size: 2.4rem;

  }

  .diagonal_midashi_in {

    display: block;

    padding: 0px 0 0 0;

    font-size: 2rem;

  }

}

/* table

============================================================================================================ */

.top_border_dash {

  border-top: dashed #d9d9d9 1px;

}



table.basic {

  width: 100%;

  line-height: 1.6;

  table-layout: fixed;

}



table.w_auot {

  width: auto !important;

}



table.basic th,

table.basic td {

  padding: 0.6em 1em;

  border-bottom: 1px solid #d9d9d9;

  word-wrap: break-word;

}



table.basic.th_center th {

  text-align: center;

  font-weight: bold;

}



table.basic.td_cetner td {

  text-align: center;

}



table.basic.td_right td {

  text-align: right;

}



table.border_none td,

table.border_none th {

  padding-bottom: 20px;

}



table.basic.border_c th,

table.basic.border_c td {

  border: 1px solid #231815 !important;

}



@media screen and (max-width: 960px) {

  table.basic {

    border-width: 2px;

    font-size: 1.2rem;

    line-height: 1.5;

  }

  table.basic th,

  table.basic td {

    padding: 0.5em;

  }

  table.basic th {

    width: 10%;

  }

  table.basic td {

    width: 20%;

  }

}

table .w10 {

  width: 10%;

}

table .w15 {

  width: 15%;

}

table .w18 {

  width: 18%;

}

table .w20 {

  width: 20%;

}

table .w25 {

  width: 25%;

}

table .w30 {

  width: 30%;

}

table .w35 {

  width: 35%;

}

table .w40 {

  width: 40%;

}

table .w45 {

  width: 45%;

}

table .w50 {

  width: 50%;

}



@media screen and (max-width: 960px) {

  table .spw100.w10 {

    width: 100%;

  }

  table .spw100.w15 {

    width: 100%;

  }

  table .spw100.w20 {

    width: 100%;

  }

  table .spw100.w25 {

    width: 100%;

  }

  table .spw100.w30 {

    width: 100%;

  }

  table .spw100.w35 {

    width: 100%;

  }

  table .spw100.w40 {

    width: 100%;

  }

  table .spw100.w45 {

    width: 100%;

  }

  table .spw100.w50 {

    width: 100%;

  }

}

@media all and (-ms-high-contrast: none) {

  table {

    width: 100%;

    table-layout: fixed;

  }

}

/* table 動く線

============================================================================================================ */

table.move_table th,

table.move_table td {

  padding: 0.6em 1em;

  border-bottom: none !important;

  position: relative;

}



table.move_table tr {

  position: relative;

}

table.move_table tr th:before {

  content: "";

  background: #d9d9d9;

  width: 100%;

  height: 1px;

  position: absolute;

  left: 0;

  bottom: 0;

}

table.move_table tr td:before {

  content: "";

  background: #d9d9d9;

  width: 100%;

  height: 1px;

  position: absolute;

  left: 0;

  bottom: 0;

}



.fadeModuleTrigger > * {

  opacity: 0;

}



/* form

============================================================================================================ */

/*formリセット

---------------------------------------------*/

/*text*/

input[type="text"],

input[type="number"],

input[type="email"],

input[type="tel"] {

  padding: 0;

  border: none;

  border-radius: 0;

  outline: none;

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

}



/*radio*/

/* input[type="radio"] {

	display: none;

} */

input[type="radio"]:checked + label {

  background: #ff0000;

}



/*checkbox*/

/* input[type="checkbox"] {

	display: none;

}

input[type="checkbox"]:checked + label {

	background: #ff0000;

} */

/*select*/

/* select {

	appearance: none;

	border: none;

	outline: none;

	background: transparent;

} */

/*ie*/

/* select::-ms-expand {

	display: none;

} */

/*textarea*/

textarea {

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

  resize: none;

  padding: 0;

  border: 0;

  outline: none;

  border-radius: 0;

}



/*button*/

button,

input[type="submit"],

input[type="reset"] {

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

  outline: none;

}



/*formリセット end

---------------------------------------------*/

.input_basic input {

  background: #fff;

  border: solid 1px #b2b2b2;

  font-size: 1.4rem;

  padding: 3px;

}



@media screen and (max-width: 1024px) {

  .input_basic input {

    font-size: 1.6rem;

  }

}

/* li______

============================================================================================================ */

/* square

------------------------------------------------------------- */

.square > * {

  position: relative;

  padding-left: 1.5em;

}



.square > * + * {

  margin-top: 1rem;

}



.square > *:before {

  content: "";

  position: absolute;

  left: 0.8rem;

  top: 1rem;

  width: 0.6rem;

  height: 0.6rem;

  background: -webkit-gradient(

    linear,

    left top,

    right top,

    from(rgb(0, 128, 228)),

    color-stop(34%, rgb(0, 128, 228)),

    color-stop(100%, rgb(0, 78, 156)),

    color-stop(800000, rgb(0, 128, 229))

  );

  background: linear-gradient(

    90deg,

    rgb(0, 128, 228) 0%,

    rgb(0, 128, 228) 34%,

    rgb(0, 78, 156) 100%,

    rgb(0, 128, 229) 800000

  );

}



/* circle

------------------------------------------------------------- */

.circle > * {

  position: relative;

  padding-left: 1em;

}



.circle > *:before {

  content: "●";

  position: absolute;

  left: 0;

}



/* asterisk

------------------------------------------------------------- */

ul.asterisk li {

  position: relative;

  padding-left: 1em;

  margin-bottom: 5px;

}



ul.asterisk li:before {

  content: "＊";

  position: absolute;

  left: 0;

}



/* disc

------------------------------------------------------------- */

ul.disc li {

  position: relative;

  padding-left: 1em;

}



ul.disc li:before {

  content: "・";

  position: absolute;

  left: 0;

}



/* notes

------------------------------------------------------------- */

ul.notes li {

  position: relative;

  padding-left: 1em;

}



ul.notes li:before {

  content: "※";

  position: absolute;

  left: 0;

}



/* decimal

------------------------------------------------------------- */

ol.decimal {

  list-style-type: decimal;

}



ol.decimal li {

  margin-left: 2em;

}



ol.decimal li + li {

  margin-top: 5px;

}



/* de_counter

------------------------------------------------------------- */

ol.de_counter {

  counter-reset: my-counter;

}

ol.de_counter > li {

  padding-left: 1.8em;

  position: relative;

  margin-bottom: 0.5em;

}

ol.de_counter > li:before {

  content: counter(my-counter);

  counter-increment: my-counter;

  background-color: #0080e5;

  border: 1px solid;

  border-radius: 50%;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  height: 2em;

  width: 2em;

  color: #ffffff;

  font-size: 85%;

  line-height: 0;

  position: absolute;

  top: 0.2em;

  left: -0.5em;

}



/* parentheses

------------------------------------------------------------- */

ol.parentheses li {

  position: relative;

  padding-left: 2em;

}



ol.parentheses li .num {

  position: absolute;

  left: 0;

}



/* line_list

------------------------------------------------------------- */

ul.line_list li {

  position: relative;

  padding-left: 1.7em;

}



ul.line_list li:before {

  content: "";

  width: 2rem;

  height: 2px;

  background: -webkit-gradient(linear, left top, right top, from(#0080e4), color-stop(17%, #0080e4), to(#004e9c));

  background: linear-gradient(to right, #0080e4 0%, #0080e4 17%, #004e9c 100%);

  position: absolute;

  left: 0;

  top: 1.2rem;

}



/*  indent*/

.indent_01 {

  padding-left: 1em;

  text-indent: -1em;

}



.indent_line_01 {

  padding-left: 1em;

}



/* img___

============================================================================================================ */

.ofi {

  width: 100%;

  -o-object-fit: cover;

  object-fit: cover;

  font-family: "object-fit: cover;";

}



.ofi.cont {

  -o-object-fit: contain;

  object-fit: contain;

  font-family: "object-fit: contain;";

}



.max_100 {

  max-width: 100%;

}



/* background bg_____

============================================================================================================ */

.bg_gray {

  background: #f2f2f2;

}



.bg_line_gray {

  border: solid 5px #f2f2f2;

}



.bg_green_l {

  background: #e7f7f7;

}



.bg_shadow {

  -webkit-box-shadow: 0px 0px 15px -5px rgba(35, 35, 35, 0.3);

  box-shadow: 0px 0px 15px -5px rgba(35, 35, 35, 0.3);

}



.bg_blue {

  background: #004ea2;

}



.bg_ff {

  background: #fff;

}



.bg_pd {

  margin: 1em auto;

  padding: 25px 40px;

}



.bg_pd_s {

  margin: 1em auto;

  padding: 20px 30px;

}



@media screen and (max-width: 960px) {

  .bg_pd {

    padding: 30px 5vw;

  }

}

@media screen and (max-width: 680px) {

  .bg_pd {

    margin: 1em auto;

    padding: 20px 20px;

  }

}

/* col______

============================================================================================================ */

.col_main {

  color: #1d61a4;

}



.col_blue {

  color: #0080e5;

}



.col_hover {

  color: #00bbb4;

}



.col_red {

  color: #cc0000;

}

.col_main_d {

  color: #062e47;

}

/* slide

============================================================================================================ */

.slick-slide {

  margin-bottom: 0 !important;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;

  outline: none !important;

}



/* fbox

============================================================================================================ */

.fbox {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

}



@media screen and (min-width: 681px) {

  .fbox.f_pc {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

  }

  .fbox.f_pc img {

    -webkit-transition: all 0.3s;

    transition: all 0.3s;

  }

  .fbox.f_pc img:hover {

    opacity: 0.6;

  }

  .fbox.f_sp {

    display: block;

  }

}

@media screen and (max-width: 680px) {

  .fbox.f_pc {

    display: block;

  }

  .fbox.f_sp {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

  }

}

.ff_re {

  -webkit-box-orient: horizontal;

  -webkit-box-direction: reverse;

  -ms-flex-flow: row-reverse wrap;

  flex-flow: row-reverse wrap;

}



.jc_sp {

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between;

}



.jc_center {

  -webkit-box-pack: center !important;

  -ms-flex-pack: center !important;

  justify-content: center !important;

}



.it_cener {

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

}



/* fbox col

------------------------------------------------------------------------------------------------- */

.col_02,

.col_03,

.col_04 {

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between;

}



.col_02 > * {

  width: 48%;

}



.col_02.w30_70 > *:first-child {

  width: 25% !important;

}

.col_02.w30_70 > *:last-child {

  width: 70% !important;

}



.col_02.w70_30 > *:first-child {

  width: 70% !important;

}

.col_02.w70_30 > *:last-child {

  width: 25% !important;

}



.col_02.w40_60 > *:first-child {

  width: 35% !important;

}

.col_02.w40_60 > *:last-child {

  width: 60% !important;

}



.col_02.w60_40 > *:first-child {

  width: 60% !important;

}

.col_02.w60_40 > *:last-child {

  width: 35% !important;

}



.col_03 > * {

  width: 32%;

}



.col_04 > * {

  width: 24%;

}



.col_02 + .col_02,

.col_03 + .col_03,

.col_04 + .col_04 {

  margin-top: 5%;

}



@media screen and (max-width: 680px) {

  .col_02.f_pc > * {

    width: auto;

  }

  .col_02.f_pc.w30_70 > *:first-child {

    width: auto !important;

  }

  .col_02.f_pc.w30_70 > *:last-child {

    width: auto !important;

  }

  .col_03.f_pc > * {

    width: auto;

  }

  .col_04.f_pc > * {

    width: auto;

  }

  .fbox.f_pc > * + * {

    margin-top: 5%;

  }

}

/* ページタイトル 

-------------------------------------------------------------------------*/

.page_title {

  position: relative;

  overflow: hidden;

  background: #0048A6;

  padding: 60px 0;

  /* border: solid 1px #ebebeb; */

  overflow: hidden;

  opacity: 0.8;

}

.page_title_text {

  letter-spacing: 1px;

  font-weight: bold;

  font-size: 1.6rem;

  color: #6eb1e5;

  z-index: 1;

  position: relative;

}

.page_title_text span {

  color: #fff;

  font-size: 3.5rem;

  margin-right: 15px;

}

.page_title_contact {

  position: relative;

  overflow: hidden;

  background: #04143B;

  padding: 60px 0;

  /* border: solid 1px #ebebeb; */

  overflow: hidden;

  opacity: 0.8;

}

.page_title_bg_text {

  z-index: 0;

  position: absolute;

  font-size: 14rem;

  top: 70%;

  right: -20px;

  -webkit-transform: translate(0%, -50%);

  transform: translate(0%, -50%);

  color: #fff;

  opacity: 0.9;

  white-space: nowrap;

}

.page_title_bg_textws {

  z-index: 0;

  position: absolute;

  font-size: 13rem;

  top: 70%;

  right: -20px;

  -webkit-transform: translate(0%, -50%);

  transform: translate(0%, -50%);

  color: #fff;

  opacity: 0.9;

  white-space: nowrap;

}

.page_title_bg_textw {

  z-index: 0;

  position: absolute;

  font-size: 12rem;

  top: 70%;

  right: -20px;

  -webkit-transform: translate(0%, -50%);

  transform: translate(0%, -50%);

  color: #fff;

  opacity: 0.9;

  white-space: nowrap;

}

.page_title_area {

  background: url(../images/mainv/title_company.jpg) no-repeat;

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  padding: 80px 0;

}

.page_title_areaqa {

  background: url(../images/mainv/title_qa.jpg) no-repeat;

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  padding: 80px 0;

}

.page_title_arealink {

  background: url(../images/mainv/title_link.jpg) no-repeat;

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  padding: 80px 0;

}

.page_title_areafirst {

  background: url(../images/mainv/title_first.jpg) no-repeat;

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  padding: 80px 0;

}

.page_title_areaorder {

  background: url(../images/mainv/title_order.png) no-repeat;

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  padding: 80px 0;

}

.page_title_areafq {

  background: url(../images/mainv/rfq.png) no-repeat;

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  padding: 80px 0;

}

.page_title_areastock {

  background: url(../images/mainv/title_stock.jpg) no-repeat;

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  padding: 80px 0;

}

.page_title_areahowto {

  background: url(../images/mainv/title_howto.jpg) no-repeat;

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  padding: 80px 0;

}

.page_title_arearule {

  background: url(../images/mainv/title_rule.jpg) no-repeat;

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  padding: 80px 0;

}

.page_title_areasaiyo {

  background: url(../images/mainv/title_saiyo.jpg) no-repeat;

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  padding: 80px 0;

}

.page_title_areahinshitu {

  background: url(../images/mainv/title_hinshitu.jpg) no-repeat;

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  padding: 80px 0;

}

.page_title_areahinkoe {

  background: url(../images/mainv/title_hinkoe.jpg) no-repeat;

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  padding: 80px 0;

}

.page_title_areamember {

  background: url(../images/mainv/title_member.jpg) no-repeat;

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  padding: 80px 0;

}

.page_title_areamember2 {

  background: url(../images/mainv/title_member2.jpg) no-repeat;

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  padding: 80px 0;

}

.page_title_areacontact {

  background: url(../images/mainv/title_contact.jpg) no-repeat;

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  padding: 80px 0;

}

.page_title_arearisk {

  background: url(../images/mainv/title_risk.jpg) no-repeat;

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  padding: 80px 0;

}

.page_title_point {

  background: url(../images/mainv/title_point.jpg) no-repeat;

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  padding: 80px 0;

}

.page_title_point02 {

  background: url(../images/mainv/title_point02.jpg) no-repeat;

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  padding: 80px 0;

}

.page_title_point03 {

  background: url(../images/mainv/title_point03.jpg) no-repeat;

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  padding: 80px 0;

}
.page_title_parts {
    background: url(../images/mainv/title_patrs.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 80px 0;
}

@media screen and (max-width: 960px) {

  .page_title {

    padding: 5vw 0;

  }

  .page_title_area {

    padding: 80px 0;

  }

  .page_title_text {

    font-size: 2vw;

  }

  .page_title_text span {

    font-size: 4vw;

    z-index: 1;

    display: block;

  }

  .page_title_bg_text {

    top: 70%;

    z-index: 0;

	  font-size: 5rem;


  }


	.page_title_contact {

	  padding: 30px 0;

	}


	.page_title_bg_textw {


	  font-size: 5rem;
      right: -5px;

	}

}

@media screen and (max-width: 480px) {

  .page_title {

    padding: 3vw 0;

  }

  .page_title_text {

    font-size: 2vw;

  }

  .page_title_text span {

    font-size: 4vw;

  }

  .page_title_bg_text {

    top: 63%;

    right: -1vw;

	  font-size: 5rem;

  }

	.page_title_bg_textw {


	  font-size: 3rem;

	}

.page_title_area {

  background: url(../images/mainv/title_company.jpg) no-repeat;

}

.page_title_areaqa {

  background: url(../images/mainv/title_qa.jpg) no-repeat;
  background-size: cover;

}

.page_title_arealink {

  background: url(../images/mainv/title_link.jpg) no-repeat;
  background-size: cover;

}

.page_title_areafirst {

  background: url(../images/mainv/title_first_sp.jpg) no-repeat;
  background-size: cover;

}

.page_title_areaorder {

  background: url(../images/mainv/title_order.png) no-repeat;
  background-size: cover;
}

.page_title_areafq {

  background: url(../images/mainv/rfq.png) no-repeat;
  background-size: cover;

}

.page_title_areastock {

  background: url(../images/mainv/title_stock.jpg) no-repeat;
  background-size: cover;

}

.page_title_areahowto {

  background: url(../images/mainv/title_howto.jpg) no-repeat;
  background-size: cover;

}

.page_title_arearule {

  background: url(../images/mainv/title_rule.jpg) no-repeat;
  background-size: cover;

}

.page_title_areasaiyo {

  background: url(../images/mainv/title_saiyo_sp.jpg) no-repeat;
  background-size: cover;

}

.page_title_areahinshitu {

  background: url(../images/mainv/title_hinshitu.jpg) no-repeat;
  background-size: cover;

}

.page_title_areahinkoe {

  background: url(../images/mainv/title_hinkoe.jpg) no-repeat;
  background-size: cover;

}

.page_title_areamember {

  background: url(../images/mainv/title_member.jpg) no-repeat;
  background-size: cover;
}

.page_title_areamember2 {

  background: url(../images/mainv/title_member2.jpg) no-repeat;
  background-size: cover;

}

.page_title_areacontact {

  background: url(../images/mainv/title_contact.jpg) no-repeat;
  background-size: cover;
}

.page_title_arearisk {

  background: url(../images/mainv/title_risk.jpg) no-repeat;
  background-size: cover;

}

.page_title_point {

  background: url(../images/mainv/title_point.jpg) no-repeat;
}

.page_title_point02 {

  background: url(../images/mainv/title_point02.jpg) no-repeat;
}

.page_title_point03 {

  background: url(../images/mainv/title_point03.jpg) no-repeat;

}
.page_title_parts {
    background: url(../images/mainv/title_patrs.jpg) no-repeat;
  background-size: cover;
}

}

/* fadeアニメ

------------------------------------------------------------------*/

.page_title.fadeUpTrigger .page_title_text {

  opacity: 0;

}



.page_title.fadeUpTrigger.fadeUp .page_title_text {

  -webkit-animation-name: fadeTitleAnime;

  animation-name: fadeTitleAnime;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: forwards;

  animation-fill-mode: forwards;

  opacity: 0;

}



@-webkit-keyframes fadeTitleAnime {

  from {

    opacity: 0;

    -webkit-transform: translateX(50vw);

    transform: translateX(50vw);

  }

  to {

    opacity: 1;

    -webkit-transform: translateX(0);

    transform: translateX(0);

  }

}



@keyframes fadeTitleAnime {

  from {

    opacity: 0;

    -webkit-transform: translateX(50vw);

    transform: translateX(50vw);

  }

  to {

    opacity: 1;

    -webkit-transform: translateX(0);

    transform: translateX(0);

  }

}

/* fadeアニメ fadeUpTrigger

------------------------------------------------------------------*/

.fadeModuleTrigger > .fadeModule {

  opacity: 0;

}



/* 下から */

.fadeModule.fadeUp > * {

  -webkit-animation-name: fadeUpAnime;

  animation-name: fadeUpAnime;

  -webkit-animation-duration: 0.5s;

  animation-duration: 0.5s;

  -webkit-animation-fill-mode: forwards;

  animation-fill-mode: forwards;

}



.fadeOut {

  opacity: 1 !important;

}



/* 左から*/

.fadeModule.fadeLeft > * {

  -webkit-animation-name: fadeLeftAnime;

  animation-name: fadeLeftAnime;

  -webkit-animation-duration: 0.5s;

  animation-duration: 0.5s;

  -webkit-animation-fill-mode: forwards;

  animation-fill-mode: forwards;

}



/* 右から*/

.fadeModule.fadeRight > * {

  -webkit-animation-name: fadeRightAnime;

  animation-name: fadeRightAnime;

  -webkit-animation-duration: 0.5s;

  animation-duration: 0.5s;

  -webkit-animation-fill-mode: forwards;

  animation-fill-mode: forwards;

}



/* 下からfade in anime------------*/

@-webkit-keyframes fadeUpAnime {

  from {

    opacity: 0;

    -webkit-transform: translateY(130px);

    transform: translateY(130px);

  }

  to {

    opacity: 1;

    -webkit-transform: translateY(0);

    transform: translateY(0);

  }

}

@keyframes fadeUpAnime {

  from {

    opacity: 0;

    -webkit-transform: translateY(130px);

    transform: translateY(130px);

  }

  to {

    opacity: 1;

    -webkit-transform: translateY(0);

    transform: translateY(0);

  }

}

/*basic animation key

----------------------------------------------------------------------------------------------------------------------------------------------------------*/

@-webkit-keyframes fade_up {

  /*下から*/

  0% {

    -webkit-transform: translateY(140px);

    transform: translateY(140px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateY(0px);

    transform: translateY(0px);

    opacity: 1;

  }

}

@keyframes fade_up {

  /*下から*/

  0% {

    -webkit-transform: translateY(140px);

    transform: translateY(140px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateY(0px);

    transform: translateY(0px);

    opacity: 1;

  }

}

@-webkit-keyframes fade_down {

  /*上から*/

  0% {

    -webkit-transform: translateY(-140px);

    transform: translateY(-140px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateY(0px);

    transform: translateY(0px);

    opacity: 1;

  }

}

@keyframes fade_down {

  /*上から*/

  0% {

    -webkit-transform: translateY(-140px);

    transform: translateY(-140px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateY(0px);

    transform: translateY(0px);

    opacity: 1;

  }

}

@-webkit-keyframes fade_up_s {

  /*下から 短め*/

  0% {

    -webkit-transform: translateY(50px);

    transform: translateY(50px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateY(0px);

    transform: translateY(0px);

    opacity: 1;

  }

}

@keyframes fade_up_s {

  /*下から 短め*/

  0% {

    -webkit-transform: translateY(50px);

    transform: translateY(50px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateY(0px);

    transform: translateY(0px);

    opacity: 1;

  }

}

@-webkit-keyframes fade_down_s {

  /*上から　短め*/

  0% {

    -webkit-transform: translateY(-50px);

    transform: translateY(-50px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateY(0px);

    transform: translateY(0px);

    opacity: 1;

  }

}

@keyframes fade_down_s {

  /*上から　短め*/

  0% {

    -webkit-transform: translateY(-50px);

    transform: translateY(-50px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateY(0px);

    transform: translateY(0px);

    opacity: 1;

  }

}

/*時間差 key

-----------------------------------------------------------------------------*/

@-webkit-keyframes fade_up_count {

  /*下から*/

  0% {

    -webkit-transform: translateY(140px);

    transform: translateY(140px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateY(0px);

    transform: translateY(0px);

    opacity: 1;

  }

}

@keyframes fade_up_count {

  /*下から*/

  0% {

    -webkit-transform: translateY(140px);

    transform: translateY(140px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateY(0px);

    transform: translateY(0px);

    opacity: 1;

  }

}

@-webkit-keyframes fade_up_count_back {

  /*下から*/

  0% {

    -webkit-transform: translateY(0px);

    transform: translateY(0px);

    opacity: 1;

  }

  100% {

    -webkit-transform: translateY(140px);

    transform: translateY(140px);

    opacity: 0;

  }

}

@keyframes fade_up_count_back {

  /*下から*/

  0% {

    -webkit-transform: translateY(0px);

    transform: translateY(0px);

    opacity: 1;

  }

  100% {

    -webkit-transform: translateY(140px);

    transform: translateY(140px);

    opacity: 0;

  }

}

/*アニメーション　basic

--------------------------------------------------------------------------------*/

/*時間差で出現 　戻るver -noback戻らないver　読み込み時ver

--------------------------------------------------------------------------------*/

/*初期値*/

.view-trigger-count-inner > *,

.view-trigger-count-inner-noback > *,

.view-trigger-count-inner-load > *,

.view-trigger-free > * {

  opacity: 0;

}



/* 出現方向の変更可能　ver */

.view-trigger-free .view-active.active-left {

  -webkit-animation: fade_up 0.5s 1 forwards;

  animation: fade_up 0.5s 1 forwards;

}



.view-trigger-free .view-active.active-up {

  -webkit-animation: fade_up 0.2s 1 forwards;

  animation: fade_up 0.2s 1 forwards;

}



/*フレーム外の時 戻るver*/

.view-trigger-count-inner > .view_fadeout {

  -webkit-animation: fade_up_count_back 0.5s 1 forwards;

  animation: fade_up_count_back 0.5s 1 forwards;

}



/*フレームinの時*/

.view-trigger-count-inner > .view-active_1,

.view-trigger-count-inner-noback > .view-active_1,

.view-trigger-count-inner-load > .view-active_1 {

  -webkit-animation: fade_up_count 1s 1 forwards;

  animation: fade_up_count 1s 1 forwards;

}



.view-trigger-count-inner > .view-active_2,

.view-trigger-count-inner-noback > .view-active_2,

.view-trigger-count-inner-load > .view-active_2 {

  -webkit-animation: fade_up_count 1s 1 forwards;

  animation: fade_up_count 1s 1 forwards;

  -webkit-animation-delay: 0.2s;

  animation-delay: 0.2s;

}



.view-trigger-count-inner > .view-active_3,

.view-trigger-count-inner-noback > .view-active_3,

.view-trigger-count-inner-load > .view-active_3 {

  -webkit-animation: fade_up_count 1s 1 forwards;

  animation: fade_up_count 1s 1 forwards;

  -webkit-animation-delay: 0.4s;

  animation-delay: 0.4s;

}



.view-trigger-count-inner > .view-active_4,

.view-trigger-count-inner-noback > .view-active_4,

.view-trigger-count-inner-load > .view-active_4 {

  -webkit-animation: fade_up_count 1s 1 forwards;

  animation: fade_up_count 1s 1 forwards;

  -webkit-animation-delay: 0.6s;

  animation-delay: 0.6s;

}



.view-trigger-count-inner > .view-active_5,

.view-trigger-count-inner-noback > .view-active_5,

.view-trigger-count-inner-load > .view-active_5 {

  -webkit-animation: fade_up_count 1s 1 forwards;

  animation: fade_up_count 1s 1 forwards;

  -webkit-animation-delay: 0.8s;

  animation-delay: 0.8s;

}



.view-trigger-count-inner > .view-active_6,

.view-trigger-count-inner-noback > .view-active_6,

.view-trigger-count-inner-load > .view-active_6 {

  -webkit-animation: fade_up_count 1s 1 forwards;

  animation: fade_up_count 1s 1 forwards;

  -webkit-animation-delay: 1s;

  animation-delay: 1s;

}



.view-trigger-count-inner > .view-active_7,

.view-trigger-count-inner-noback > .view-active_7,

.view-trigger-count-inner-load > .view-active_7 {

  -webkit-animation: fade_up_count 1s 1 forwards;

  animation: fade_up_count 1s 1 forwards;

  -webkit-animation-delay: 1.2s;

  animation-delay: 1.2s;

}



.view-trigger-count-inner > .view-active_8,

.view-trigger-count-inner-noback > .view-active_8,

.view-trigger-count-inner-load > .view-active_8 {

  -webkit-animation: fade_up_count 1s 1 forwards;

  animation: fade_up_count 1s 1 forwards;

  -webkit-animation-delay: 1.4s;

  animation-delay: 1.4s;

}



.view-trigger-count-inner > .view-active_9,

.view-trigger-count-inner-noback > .view-active_9,

.view-trigger-count-inner-load > .view-active_9 {

  -webkit-animation: fade_up_count 1s 1 forwards;

  animation: fade_up_count 1s 1 forwards;

  -webkit-animation-delay: 1.6s;

  animation-delay: 1.6s;

}



.view-trigger-count-inner > .view-active_10,

.view-trigger-count-inner-noback > .view-active_10,

.view-trigger-count-inner-load > .view-active_10 {

  -webkit-animation: fade_up_count 1s 1 forwards;

  animation: fade_up_count 1s 1 forwards;

  -webkit-animation-delay: 1.8s;

  animation-delay: 1.8s;

}



/* main_title

------------------------------------------------------------------------------------------ */

.main_title {

  letter-spacing: 1px;

  font-size: 2.4rem;

  line-height: 1.8;

  font-weight: normal;

}



.text_inner > p + p {

  margin-top: 1em;

}



.text_inner_2 > p + p {

  margin-top: 1.5em;

}



.lead {

  line-height: 2;

}

.lead_16 {

  line-height: 2;

  font-size: 1.6rem;

}

.lead_18 {

  line-height: 2;

  font-size: 1.8rem;

}

.lead_17 {

  line-height: 2.2;

  font-size: 1.7rem;

}

.lead_20 {

  line-height: 2;

  font-size: 2rem;

}



@media screen and (max-width: 680px) {

  .main_title {

    font-size: 1.6rem;

  }

  .lead_18 {

    font-size: 1.4rem;

  }

  .lead_17 {

    font-size: 1.3rem;

  }

  .lead_16 {

    font-size: 1.2rem;

  }

  .lead_20 {

    font-size: 1.6rem;

  }

}

/* under_cv

------------------------------------------------------------------------------------------------- */

.under_cv {

  max-width: 600px;

  margin: auto;

}

.under_cv_title {

  /* font-weight: bold; */

  font-size: 1.8rem;

}

.under_cv_list {

  padding: 30px 0 0 0;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between;

}

.under_cv_list li {

  width: 49%;

  text-align: center;

}

.under_cv_list li > * {

  color: #fff;

  width: 100%;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  font-weight: bold;

  height: 60px;

  padding: 0px 0 0 30px !important;

  width: 100%;

  line-height: 1.2;

}

.under_cv_list .under_cv_user > * {

  border: solid 1px transparent;

  display: -webkit-inline-box;

  display: -ms-inline-flexbox;

  display: inline-flex;

  padding: 0.5em 1.5em;

  color: #fff;

  letter-spacing: 1px;

  -webkit-transition: 0.3s;

  transition: 0.3s;

  /* border-radius: 5px; */

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  background: #00bbb4;

  font-size: 2rem;

  position: relative;

  overflow: hidden;

  overflow: hidden;

}

.under_cv_list .under_cv_user > * span {

  position: relative;

  z-index: 3;

  color: #fff;

}

.under_cv_list .under_cv_user > *:hover span {

  color: #00bbb4;

}

.under_cv_list .under_cv_user > *:before {

  content: "";

  position: absolute;

  top: 0;

  left: -130%;

  background: #fff;

  width: 120%;

  height: 100%;

  -webkit-transform: skewX(-25deg);

  transform: skewX(-25deg);

  border: 1px solid "#00bbb4";

}

.under_cv_list .under_cv_user > *:hover:before {

  /*hoverした時のアニメーション*/

  -webkit-animation: skewanime 0.5s forwards;

  animation: skewanime 0.5s forwards; /*アニｓメーションの名前と速度を定義*/

}

.under_cv_list .under_cv_user > *:after {

  content: "";

  background: url("../images/ico_user.svg") no-repeat;

  background-size: contain;

  position: absolute;

  top: 50%;

  -webkit-transform: translate(0%, -50%);

  transform: translate(0%, -50%);

  width: 30px;

  height: 30px;

  left: 20px;

  left: 50px;

}

.under_cv_list .under_cv_user > *:hover:after {

  background: url("../images/ico_user_hover.svg") no-repeat;

  left: 50px;

}

.under_cv_list .under_cv_mail > * {

  border: solid 1px transparent;

  display: -webkit-inline-box;

  display: -ms-inline-flexbox;

  display: inline-flex;

  padding: 0.5em 1.5em;

  color: #fff;

  letter-spacing: 1px;

  -webkit-transition: 0.3s;

  transition: 0.3s;

  /* border-radius: 5px; */

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  background: #1f96c3;

  font-size: 2rem;

  position: relative;

  overflow: hidden;

  overflow: hidden;

}

.under_cv_list .under_cv_mail > * span {

  position: relative;

  z-index: 3;

  color: #fff;

}

.under_cv_list .under_cv_mail > *:hover span {

  color: #1f96c3;

}

.under_cv_list .under_cv_mail > *:before {

  content: "";

  position: absolute;

  top: 0;

  left: -130%;

  background: #fff;

  width: 120%;

  height: 100%;

  -webkit-transform: skewX(-25deg);

  transform: skewX(-25deg);

  border: 1px solid "#00bbb4";

}

.under_cv_list .under_cv_mail > *:hover:before {

  /*hoverした時のアニメーション*/

  -webkit-animation: skewanime 0.5s forwards;

  animation: skewanime 0.5s forwards; /*アニｓメーションの名前と速度を定義*/

}

.under_cv_list .under_cv_mail > *:after {

  content: "";

  background: url("../images/ico_mail.svg") no-repeat;

  background-size: contain;

  position: absolute;

  top: 50%;

  -webkit-transform: translate(0%, -50%);

  transform: translate(0%, -50%);

  width: 36px;

  height: 23px;

  left: 20px;

  left: 38px;

}

.under_cv_list .under_cv_mail > *:hover:after {

  background: url("../images/ico_mail_hover.svg") no-repeat;

  left: 38px;

}

.under_cv_list .under_cv_tel > * {

  border: solid 1px transparent;

  display: -webkit-inline-box;

  display: -ms-inline-flexbox;

  display: inline-flex;

  padding: 0.5em 1.5em;

  color: #5a5a5a;

  letter-spacing: 2px;

  -webkit-transition: 0.3s;

  transition: 0.3s;

  /* border-radius: 5px; */

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  background: #ffd93b;

  font-size: 1.6rem;

  position: relative;

  line-height: 1.5;

  border-radius: 0;

  /* box-shadow: 0px 0px 15px -5px #474747; */

}

.under_cv_list .under_cv_tel > * > * > .mon {

  font-size: 2.4rem;

  letter-spacing: 2px;

}

.under_cv_list .under_cv_tel > *:after {

  content: "";

  background: url("../images/ico_tel_black.svg") no-repeat;

  background-size: contain;

  position: absolute;

  top: 50%;

  -webkit-transform: translate(0%, -50%);

  transform: translate(0%, -50%);

  width: 30px;

  height: 30px;

  left: 20px;

  left: 1em;

}

.under_cv_list .under_cv_tel > *:hover {

  opacity: 1 !important;

  cursor: auto;

}



@media screen and (max-width: 960px) {

  .under_cv_list {

    max-width: 90% !important;

    margin: auto;

    padding: 3vw 0 0 0;

  }

  .under_cv_list .under_cv_user > * {

    border: solid 1px transparent;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    padding: 0.5em 1.5em;

    color: #fff;

    letter-spacing: 1px;

    -webkit-transition: 0.3s;

    transition: 0.3s;

    /* border-radius: 5px; */

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    background: #00bbb4;

    font-size: 2rem;

    position: relative;

    overflow: hidden;

  }

  .under_cv_list .under_cv_user > *:after {

    content: "";

    background: url("../images/ico_user.svg") no-repeat;

    background-size: contain;

    position: absolute;

    top: 50%;

    -webkit-transform: translate(0%, -50%);

    transform: translate(0%, -50%);

    width: 30px;

    height: 30px;

    left: 20px;

    left: 4vw;

  }

  .under_cv_list .under_cv_user > *:hover:after {

    background: url("../images/ico_user_hover.svg") no-repeat;

    left: 4vw;

  }

  .under_cv_list .under_cv_mail > * {

    border: solid 1px transparent;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    padding: 0.5em 1.5em;

    color: #fff;

    letter-spacing: 1px;

    -webkit-transition: 0.3s;

    transition: 0.3s;

    /* border-radius: 5px; */

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    background: #1f96c3;

    font-size: 1.9rem;

    position: relative;

    overflow: hidden;

  }

  .under_cv_list .under_cv_mail > *:after {

    content: "";

    background: url("../images/ico_mail.svg") no-repeat;

    background-size: contain;

    position: absolute;

    top: 50%;

    -webkit-transform: translate(0%, -50%);

    transform: translate(0%, -50%);

    width: 36px;

    height: 23px;

    left: 20px;

    left: 5vw;

  }

  .under_cv_list .under_cv_mail > *:hover:after {

    background: url("../images/ico_mail_hover.svg") no-repeat;

    left: 5vw;

  }

  .under_cv_list .under_cv_tel > * {

    border: solid 1px transparent;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    padding: 0.5em 1.5em;

    color: #5a5a5a;

    letter-spacing: 2px;

    -webkit-transition: 0.3s;

    transition: 0.3s;

    /* border-radius: 5px; */

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    background: #ffd93b;

    font-size: 1.6rem;

    position: relative;

    line-height: 1.5;

    border-radius: 0;

    /* box-shadow: 0px 0px 15px -5px #474747; */

  }

  .under_cv_list .under_cv_tel > * > * > .mon {

    font-size: 2rem;

  }

  .under_cv_list .under_cv_tel > *:after {

    left: 2vw;

  }

}

@media screen and (max-width: 680px) {

  .under_cv_title {

    font-size: 1.8rem;

  }

  .under_cv_list {

    padding: 20px 0 0 0;

    display: block;

  }

  .under_cv_list li {

    width: 100%;

  }

  .under_cv_list li > * {

    height: 70px;

    padding: 0px 0 0 40px !important;

  }

  .under_cv_list li + li {

    margin-top: 3%;

  }

  .under_cv_list .under_cv_user > *:after {

    content: "";

    background: url("../images/ico_user.svg") no-repeat;

    background-size: contain;

    position: absolute;

    top: 50%;

    -webkit-transform: translate(0%, -50%);

    transform: translate(0%, -50%);

    width: 30px;

    height: 30px;

    left: 20px;

    left: 1.5em;

  }

  .under_cv_list .under_cv_user > *:hover:after {

    background: url("../images/ico_user_hover.svg") no-repeat;

    left: 6vw;

  }

  .under_cv_list .under_cv_tel > * {

    border: solid 1px transparent;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    padding: 0.5em 1.5em;

    color: #5a5a5a;

    letter-spacing: 2px;

    -webkit-transition: 0.3s;

    transition: 0.3s;

    /* border-radius: 5px; */

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    background: #ffd93b;

    font-size: 1.6rem;

    position: relative;

    line-height: 1.5;

    border-radius: 0;

    /* box-shadow: 0px 0px 15px -5px #474747; */

  }

  .under_cv_list .under_cv_tel > * > * > .mon {

    font-size: 2.2rem;

  }

  .under_cv_list .under_cv_tel > *:after {

    left: 6vw;

  }

}

/* midashi____

------------------------------------------------------------------------------------------------- */

.midashi_l {

  font-size: 1.6rem;

  letter-spacing: 2px;

  -webkit-font-feature-settings: "palt";

  font-feature-settings: "palt";

  margin-bottom: 2em;

}

.midashi_l span {

  font-size: 2.9rem;

}

.midashi_l .midashi_eng {

  font-size: 2rem;

  color: #707070;

}



@media screen and (max-width: 680px) {

  .midashi_l {

    font-size: 1.6rem;

    margin-bottom: 1em;

  }

  .midashi_l span {

    font-size: 2.2rem;

  }

}

.midashi_diagonal_risk {

  position: relative;

  color: #0c5c89;

  padding: 0rem 0 1.2rem 3.2rem;

  font-size: 1.8rem;

  line-height: 1.5;

}

.midashi_diagonal_risk:before {

  content: "";

  background: url(../images/risk/midashi_diagonalbg.svg) no-repeat;

  height: 3.8rem;

  width: 2.5rem;

  position: absolute;

  left: 0;

  top: 0.2rem;

}



/* under_title_l

------------------------------------------------------------------------------------------------- */

.under_title_l {

  border-left: solid 5px #1d61a4;

  padding-left: 0.5em;

  margin-bottom: 1em;

}



@media screen and (max-width: 680px) {

  .under_title_l {

    margin-bottom: 1em;

  }

}

/*section_border

------------------------------------------------------------------------------------------------- */

.section_border {

  border-top: 1px #f2f2f2 solid;

}



/*point_box

------------------------------------------------------------------------------------------------- */

.point_box {

  max-width: 90%;

  margin: auto;

}

.point_box .ico_point {

  width: 10%;

}

.point_box .ico_point img {

  max-width: 60px;

}

.point_box .text_box {

  width: 87%;

}



@media screen and (max-width: 680px) {

  .point_box {

    max-width: 100%;

    margin: auto;

  }

  .point_box .ico_point {

    width: auto;

    text-align: center;

  }

  .point_box .ico_point img {

    max-width: 40px;

  }

  .point_box .text_box {

    width: auto;

  }

}

/* QA

--------------------------------------------------------------------------------------------------------------------------  */

/* aco

============================================================================================================ */

.aco_btn:hover {

  cursor: pointer;

}



.aco_box {

  display: none;

}



.qa_area {

  display: block;

  position: relative;

}

.qa_area:before {

  content: "";

  background: url(../images/qa/qa_bg_01.svg) no-repeat;

  width: 310px;

  height: 416px;

  background-size: contain;

  position: absolute;

  top: 10%;

  left: 0;

  display: block;

  z-index: -1;

}

.qa_area:after {

  content: "";

  background: url(../images/qa/qa_bg_02.svg) no-repeat;

  width: 338px;

  height: 196px;

  background-size: contain;

  position: absolute;

  bottom: 5%;

  right: 0;

  display: block;

  z-index: -1;

}

.qa_title {

  position: relative;

  margin-top: 5rem;

  margin-bottom: 12rem;

}

.qa_title_01 > * {

  position: relative;

  text-align: center;

  display: inline;

  color: #fff;

}

.qa_title_01 > *:after {

  content: "";

  background: url(../images/qa/qa_title_bg_01.svg) no-repeat;

  background-size: contain;

  width: 6em;

  height: 3rem;

  position: absolute;

  top: 30%;

  left: -4rem;

  -webkit-transform: translate(-50%, 0%);

  transform: translate(-50%, 0%);

  z-index: 1;

}

.qa_title_02 > * {

  position: relative;

  text-align: center;

  display: inline;

  color: #fff;

}

.qa_title_02 > *:after {

  content: "";

  background: url(../images/qa/qa_title_bg_02.svg) no-repeat;

  background-size: contain;

  width: 1.5em;

  height: 6.5rem;

  position: absolute;

  top: -1rem;

  left: -2.5rem;

  -webkit-transform: translate(-50%, 0%);

  transform: translate(-50%, 0%);

  z-index: 1;

}

.qa_title:before {

  width: 150vw;

  height: 10rem;

  background: -webkit-gradient(linear, left top, right top, from(#0080e5), color-stop(24%, #0080e5), to(#004e9d));

  background: linear-gradient(to right, #0080e5 0%, #0080e5 24%, #004e9d 100%);

  content: "";

  left: -50vw;

  top: -3rem;

  position: absolute;

  z-index: -1;

}



.qa_list > li + li {

  margin-top: 0.5%;

}

.qa_list > li > dl > * {

  position: relative;

  padding-left: 3rem;

}

.qa_list > li > dl > *:before {

  position: absolute;

  top: 25px;

  left: 18px;

  /* 	border-radius: 5px; */

  text-align: center;

  line-height: 0;

}

.qa_list > li > dl > dt {

  background: #f6f6f6;

  /* font-weight: bold; */

  font-size: 1.6rem;

  padding: 15px 60px;

}

.qa_list > li > dl > dt:before {

  content: "Q";

  font-weight: bold;

  color: #1d61a4;

  font-size: 2.4rem;

}

.qa_list > li > dl > dt:after {

  content: "";

  background: url("../images/ico_plus.svg") no-repeat;

  width: 20px;

  height: 20px;

  position: absolute;

  top: 20px;

  right: 20px;

  -webkit-transition: 0.3s;

  transition: 0.3s;

}

.qa_list > li > dl > dt.active:after {

  -webkit-transform: rotate(-45deg);

  transform: rotate(-45deg);

}

.qa_list > li > dl > dd {

  word-break: break-all;

  font-size: 1.6rem;

  border: solid 3px #f6f6f6;

  padding: 10px 10px 30px 60px;

  background: #fff;

}

.qa_list > li > dl > dd:before {

  top: 2rem;

  content: "A";

  font-weight: bold;

  color: #00bbb4;

  font-size: 2.3rem;

}



@media screen and (max-width: 1000px) {

  .qa_area:before {

    content: normal;

  }

  .qa_area:after {

    content: normal;

  }

  .qa_list > li + li {

    margin-top: 2%;

  }

  .qa_list > li > dl > dt {

    padding: 15px 8vw 15px 10vw;

  }

  .qa_list > li > dl > dd {

    padding: 15px 2vw 15px 10vw;

  }

}

@media screen and (max-width: 480px) {

  .qa_title {

    position: relative;

    margin-top: 3rem;

    margin-bottom: 8rem;

  }

  .qa_list > li > dl *:before {

    top: 25px;

    left: 15px;

  }

  .qa_list > li > dl > dt {

    font-size: 1.3rem;

    padding: 15px 40px 20px 50px;

  }

  .qa_list > li > dl > dt:before {

    content: "Q";

  }

  .qa_list > li > dl > dt:after {

    width: 16px;

    height: 16px;

    top: 20px;

    right: 10px;

  }

  .qa_list > li > dl > dd {

    font-size: 1.3rem;

    /* 	padding: 50px 10px 20px 10px; */

  }

  .qa_list > li > dl > dd:before {

    top: 25px;

    content: "A";

  }

}

.qa_inner_list li + li {

  margin-top: 10px;

}



.qa_inner_dl dd {

  padding-left: 1em;

}



.qa_anchor_list {

  font-size: 1.8rem;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

}

.qa_anchor_list > * a {

  border: solid 1px #1d61a4;

  padding: 0 10px;

  color: #1d61a4;

  border-radius: 20px;

  display: block;

  -webkit-transition: all 0.15s ease;

  transition: all 0.15s ease;

}

.qa_anchor_list > * a:hover {

  color: #fff;

  background: #1d61a4;

}

.qa_anchor_list > * + * {

  margin-left: 15px;

}



@media screen and (max-width: 480px) {

  .qa_anchor_list {

    font-size: 1.6rem;

  }

}

/* rule 利用規約

--------------------------------------------------------------------------------------------------------------------------  */

.pd_left {

  padding-left: 1em;

}



/* order ご注文

------------------------------------------------------------------------------------------------- */

.orde_list li {

  background: #fff;

  border: solid 5px #f2f2f2;

}

.orde_list li .orde_list_inner {

  padding: 30px;

}



/* agree 利用規約

------------------------------------------------------------------------------------------------- */

.list_cont_basic li + li {

  margin-top: 4%;

}



@media screen and (max-width: 480px) {

  .list_cont_basic li + li {

    margin-top: 10%;

  }

}

/* link リンク集

------------------------------------------------------------------------------------------------- */

/* link_list_anchor */

.link_list_anchor {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -ms-flex-pack: distribute;

  justify-content: space-around;

  margin-bottom: 30px;

}

.link_list_anchor > * {

  display: inline-block;

  padding: 0 10px;

  font-size: 1.8rem;

  position: relative;

  border: solid #fff 1px;

  -webkit-transition: all 0.3s ease;

  transition: all 0.3s ease;

  color: #014f9d;

}

.link_list_anchor > *:hover {

  opacity: 1 !important;

  border: solid #014f9d 1px;

  border-radius: 100px;

}



@media screen and (max-width: 1000px) {

  .link_list_anchor {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: start;

    -ms-flex-pack: start;

    justify-content: flex-start;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

  }

  .link_list_anchor > * {

    display: inline-block;

    padding: 0 10px;

    font-size: 1.8rem;

  }

}

.link_contents {

  font-size: 1.3rem;

}



.link_list_title {

  margin-top: 20px;

  font-size: 1.8rem;

  font-weight: bold;

  background: #0080e5;

  padding: 0px 10px;

  color: #fff;

}



.link_list {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

}

.link_list > li {

  width: 48%;

  margin: 0 1%;

  border-bottom: 1px solid #0080e5;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

}

.link_list > li > * {

  width: auto;

  padding: 0 5px;

}

.link_list > li > * a {

  display: block;

  padding: 5px 0;

  word-break: break-all;

}



@media screen and (max-width: 480px) {

  .link_list > li {

    width: 48%;

  }

  .link_list > li > * a {

    padding: 3px 0;

    font-size: 1.2rem;

  }

}

.overseas .link_list_title {

  background: #00bbb4;

}

.overseas .link_list > li {

  border-bottom: 1px solid #00bbb4;

}

.overseas .link_list > li > * {

  width: 40%;

}

.overseas .link_list > li > *:nth-child(3) {

  width: 10%;

}



@media screen and (max-width: 480px) {

  .fav_link .link_list > li > * {

    width: 30%;

  }

  .fav_link .link_list > li > *:nth-child(2) {

    width: 70%;

  }

}

/* link_list_anchor_ver2 */

.link_title {

  font-size: 1.8rem;

}



.link_list_anchor_ver2 {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between;

  border-top: solid 1px #1d61a4;

  border-right: solid 1px #1d61a4;

  border-bottom: solid 1px #1d61a4;

  border-left: solid 8px #1d61a4;

  background: #fff;

  border-radius: 0 100px 100px 0;

  padding: 0px 20px 0 10px;

}

.link_list_anchor_ver2 a {

  font-size: 1.8rem;

  color: #1d61a4;

  display: block;

  padding: 10px;

  position: relative;

  font-weight: bold;

}

.link_list_anchor_ver2 a:before {

  opacity: 0;

  content: "";

  width: 1.5em;

  height: 1px;

  position: absolute;

  left: 50%;

  bottom: 0px;

  background: #014f9d;

  border-radius: 100px;

  -webkit-transform: translate(-50%, 0%);

  transform: translate(-50%, 0%);

  -webkit-transition: all 0.2s ease;

  transition: all 0.2s ease;

}

.link_list_anchor_ver2 a:hover {

  opacity: 1 !important;

}

.link_list_anchor_ver2 a:hover:before {

  bottom: 8px;

  opacity: 1;

}



@media screen and (max-width: 920px) {

  .link_list_anchor_ver2 {

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-pack: start;

    -ms-flex-pack: start;

    justify-content: flex-start;

    padding: 5px 0px 5px 10px;

    border-radius: 0 10px 10px 0;

  }

  .link_list_anchor_ver2 a {

    font-size: 1.6rem;

    padding: 0px 10px;

  }

}

/*PartsIndex  パーツインデックス

------------------------------------------------------------------------------------------------- */

.parts_list {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

}

.parts_list a {

  color: #1d61a4;

  text-decoration: underline;

  padding: 5px 5px;

  font-size: 1.3rem;

  letter-spacing: 2px;

  -webkit-font-feature-settings: "pwid";

  font-feature-settings: "pwid";

  display: block;

}

.parts_list a:hover {

  text-decoration: none;

  color: #00bbb4;

}



@media screen and (max-width: 480px) {

  .parts_list a {

    padding: 3px 5px;

  }

}

/*sitemap  サイトマップ

------------------------------------------------------------------------------------------------- */

.site_map {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

}

.site_map > ul {

  /* 	width:32%; */

  margin-right: 8%;

  margin-bottom: 5%;

  /* 

  &:nth-child(3n){

  	margin-right: 0%;

  } */

}

.site_map > ul > li {

  margin-bottom: 10%;

}

.site_map > ul > li a {

  display: block;

  padding-left: 1.5em;

  position: relative;

  text-decoration: underline;

  color: #0080e5;

}

.site_map > ul > li a:before {

  content: "";

  position: absolute;

  background: -webkit-gradient(linear, left top, right top, from(rgb(0, 128, 228)), to(rgb(0, 78, 156)));

  background: linear-gradient(90deg, rgb(0, 128, 228) 0%, rgb(0, 78, 156) 100%);

  left: 0;

  top: 12px;

  width: 1em;

  height: 3px;

}



@media screen and (max-width: 680px) {

  .site_map {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

  }

  .site_map > ul {

    width: 46%;

    margin-right: 8%;

    margin-bottom: 5%;

  }

  .site_map > ul:nth-child(3n) {

    margin-right: 8%;

  }

  .site_map > ul:nth-child(2n) {

    margin-right: 0%;

  }

  .site_map > ul > li {

    margin-bottom: 10px;

  }

  .site_map > ul > li a {

    font-size: 1.3rem;

    display: block;

    padding-left: 1.5em;

    position: relative;

    text-decoration: underline;

  }

}

/*news_list  ニュースcms

------------------------------------------------------------------------------------------------- */

.news_cms_title {

  padding-bottom: 50px;

}

.news_cms_title h1 {

  margin-bottom: 1em;

  font-size: 30px;

  font-size: 3rem;

  letter-spacing: 1px;

  position: relative;

}

.news_cms_title .date {

  font-weight: bold;

}

.news_cms h2 {

  font-size: 26px;

  font-size: 2.6rem;

  margin: 1.5em 0;

  letter-spacing: 1px;

  position: relative;

  border-left: solid 5px #1d61a4;

  padding-left: 0.5em;

}





.news_cms h3 {

  font-size: 23px;

  font-size: 2.3rem;

  margin: 1.5em 0;

  position: relative;

}

.news_cms h3:before {

  content: "";

  position: absolute;

  width: 100%;

  height: 1px;

  bottom: -0.2em;

  left: 0;

  background: #1d61a4;

}

.news_cms img {

  max-width: 100%;

}

.news_cms ul > * {

  position: relative;

  padding-left: 1em;

}

.news_cms ul > *:before {

  content: "■";

  position: absolute;

  left: 0;

  color: #ffd93b;

}

.news_cms a {

  color: #00bbb4;

  text-decoration: underline;

}

.news_cms a:hover {

  text-decoration: none;

}

.news_cms ul + img,

.news_cms img + ul,

.news_cms img + img {

  margin-top: 10px;

}



@media screen and (max-width: 480px) {

  .news_cms_title {

    padding-bottom: 5vw;

  }

  .news_cms_title h1 {

    font-size: 2.4rem;

  }

  .news_cms_title .date {

    font-size: 1.3rem;

  }

  .news_cms h2 {

    font-size: 2.2rem;

    margin: 1em 0;

  }

  .news_cms h3 {

    font-size: 2rem;

    margin: 1em 0;

  }

}

/*qsearch 検索結果

------------------------------------------------------------------------------------------------- */

.qsearch .search_cont_form .search_form {

  margin-left: 0;

}



/* お客様の声　module版

------------------------------------------------------------------------------------------- */

.voice_body .risk_main_area_flex {

  padding: 0px 0;

}

.voice_body .risk_main_area_flex .img {

  width: 30%;

}

.voice_body .risk_main_area_flex .text_box_balloon {

  line-height: 2;

  width: 70%;

}



@media screen and (max-width: 680px) {

  .voice_body .risk_main_area_flex {

    padding: 20px 0 0 0;

  }

  .voice_body .risk_main_area_flex .text_box_balloon {

    width: auto;

  }

}

.voice_mo .voice {

  margin: auto;

  /* li:nth-child(even) .voice_answer {

  	transform: translate(75%, -25px);

  } */

}

.voice_mo .voice_list {

  padding: 30px 0 0px 0;

}

.voice_mo .voice_list li {

  z-index: -1;

  padding: 0 0 60px 0;

  position: relative;

  /* sub */

}

.voice_mo .voice_list li:nth-child(odd) {

  background: #f7fbff;

}

.voice_mo .voice_list li:nth-child(odd):before {

  position: absolute;

  content: "";

  background: #fff;

  width: 100%;

  height: 3.5rem;

  top: 0rem;

}

.voice_mo .voice_list li:nth-child(even):before {

  position: absolute;

  content: "";

  background: #f7fbff;

  width: 100%;

  height: 3.5rem;

  top: 0rem;

}



.voice_mo .voice_list li .voice_list_sub {

  padding: 80px 0 0px 0;

}



.voice_mo .voice_list_line {

  max-width: 1210px;

  margin: auto auto auto auto;

  position: relative;

  padding: 30px 0 0 0;

}

.voice_mo .voice_list_inner {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: start;

  -ms-flex-align: start;

  align-items: flex-start;

}

.voice_mo .voice_list_inner .img {

  position: relative;

  width: 23%;

  text-align: center;

}

.voice_mo .voice_list_inner .img img {

  width: 55%;

  margin-bottom: 3rem;

}

.voice_mo .voice_list_inner .img_text {

  color: #fff;

  text-align: center;

  margin: auto;

  padding: 4px 24px;

  background: url(../images/voice/voice_title_bg.svg) no-repeat;

  background-size: contain;

  background-position: center;

}

.voice_mo .voice_list_inner .text_box {

  width: 77%;

}

.voice_mo .voice_list_inner .text_box .inner_bg {

  width: 57%;

  position: relative;

}

.voice_mo .voice_list_inner .text_box .inner_bg:before {

  content: "";

  background: -webkit-gradient(linear, left top, right top, from(#0080e5), color-stop(24%, #0080e5), to(#004e9d));

  background: linear-gradient(to right, #0080e5 0%, #0080e5 24%, #004e9d 100%);

  width: 100%;

  height: 100%;

  position: absolute;

  top: 5px;

  left: 5px;

  z-index: -1;

}

.voice_mo .voice_list_inner .text_box .voice_inner_text {

  position: relative;

  font-size: 1.7rem;

  list-style: 2;

  border: solid 2px #0080e5;

  padding: 30px 30px 50px 30px;

  background: #fff;

  z-index: 2;

}

.voice_mo .voice_list_inner .text_box .voice_inner_text:after {

  content: "";

  background: url(../images/voice/mo_voice_arrow.svg) no-repeat;

  width: 18px;

  height: 13px;

  position: absolute;

  top: 5rem;

  left: -18px;

}

.voice_mo .voice_inner_title {

  color: #fff;

  font-weight: bold;

  font-size: 2.3rem;

  margin-bottom: 1rem;

  position: relative;

  display: inline-block;

  z-index: 1;

  padding: 0rem 3rem 0rem 38rem;

  background: -webkit-gradient(linear, left top, right top, from(#004e9d), to(#004e9d));

  background: linear-gradient(90deg, ##088eff 0%, #52afff 100%);

  -webkit-transform: skewX(-20deg);

  transform: skewX(-20deg);

}

.voice_mo .voice_inner_title .title_bg {

  padding: 2rem 0 2rem 9rem;

  position: relative;

  -webkit-transform: skewX(20deg);

  transform: skewX(20deg);

  z-index: 2;

  display: block;

}

.voice_mo .voice_inner_title .title_bg:before {

  /* 斜め飾り */

  content: "";

  background: url(../images/voice/mo_voice_title_bg_blue.svg) no-repeat;

  position: absolute;

  width: 100%;

  height: 100%;

  left: -2rem;

  top: 0;

}

.voice_mo .voice_inner_title .title_bg:after {

  /* ！マーク */

  content: "";

  background: url(../images/voice/mo_voice_ex.svg) no-repeat;

  position: absolute;

  width: 42px;

  height: 66px;

  top: 35%;

  left: 0%;

  -webkit-transform: translate(0%, -50%);

  transform: translate(0%, -50%);

}

.voice_mo .voice_inner_title .title_bg .title_text {

  position: relative;

  z-index: 5;

}

.voice_mo .voice_inner_title_area {

  top: 50%;

  /* transform: translate(-35rem, -50%); */

  -webkit-transform: translate(-35rem, 0%);

  transform: translate(-35rem, 0%);

  position: relative;

  max-width: 1223px;

  margin: auto;

  padding: 0;

}

.voice_mo .voice_answer {

  position: relative;

  width: 65%;

  background: #c2eeff;

  padding: 30px 30px;

  border-radius: 8px;

  font-size: 1.6rem;

  /* font-feature-settings: "palt"; */

  letter-spacing: -1px;

  z-index: 2;

}



@media screen and (max-width: 1210px) {

  .voice_mo .voice_list li:nth-child(even) .voice_list_inner {

    -webkit-transform: translate(2rem, 0%);

    transform: translate(2rem, 0%);

  }

  .voice_mo .voice_list li .voice_list_line:nth-child(odd) {

    -webkit-transform: translate(2rem, 0%);

    transform: translate(2rem, 0%);

  }


  .voice_mo .voice_list_line {

    max-width: 90%;

  }

  .voice_mo .voice_list_inner .img {

    width: 30%;

  }

  .voice_mo .voice_list_inner .img img {

    width: 60%;

  }

  .voice_mo .voice_list_inner .text_box {

    margin-left: 5%;

  }

  .voice_mo .voice_list_inner .text_box .inner_bg {

    width: 80%;

  }

  .voice_mo .voice_inner_title {

    font-size: 2.3rem;

    padding: 0rem 3rem 0rem 7rem;

  }

  .voice_mo .voice_inner_title .title_bg {

    padding: 1.5rem 0 1.5rem 9rem;

    -webkit-transform: skewX(0 20deg);

    transform: skewX(0 20deg);

  }

  .voice_mo .voice_inner_title_area {

    -webkit-transform: translate(-4rem, 0%);

    transform: translate(-4rem, 0%);

    padding: 1.5rem 0 1.5rem 0;

  }

  .voice_mo .voice_answer {

    width: 85%;

  }

}

@media screen and (max-width: 960px) {

  .voice_mo .voice_list li {

    padding: 0px 0 6rem 0;

    position: relative;

    /* sub */

  }

  .voice_mo .voice_list li:nth-child(even) .voice_list_inner {

    -webkit-transform: translate(0rem, 0%);

    transform: translate(0rem, 0%);

  }

  .voice_mo .voice_list li .voice_list_sub {

    padding: 60px 0 0px 0;

  }

  .voice_mo .voice_list li .voice_list_line:nth-child(odd) {

    -webkit-transform: translate(0rem, 0%);

    transform: translate(0rem, 0%);

  }

  .voice_mo .voice_list_line {

    padding: 0px 0 0 0;

  }

  .voice_mo .voice_list_inner .img {

    width: 40%;

  }

  .voice_mo .voice_list_inner .img img {

    width: 60%;

  }

  .voice_mo .voice_list_inner .text_box {

    margin-left: 1%;

    width: 60%;

  }

  .voice_mo .voice_list_inner .text_box .inner_bg {

    width: 90%;

  }

  .voice_mo .voice_list_inner .text_box .voice_inner_text {

    position: relative;

    font-size: 1.6rem;

    border: solid 2px #0080e5;

    padding: 30px 30px 80px 30px;

  }

  .voice_mo .voice_inner_title {

    font-size: 1.5rem;

  }

}

@media screen and (max-width: 680px) {

  .voice_mo .voice_list li {

    padding: 0px 0 6rem 0;

  }

  .voice_mo .voice_list li:nth-child(odd):before {

    height: 4rem;

  }

  .voice_mo .voice_list li:nth-child(even):before {

    height: 4rem;

  }

  .voice_mo .voice_list_inner .img {

    width: 40%;

  }

  .voice_mo .voice_list_inner .img img {

    width: 60%;

  }

  .voice_mo .voice_list_inner .text_box {

    margin-left: 1%;

    width: 60%;

  }

  .voice_mo .voice_list_inner .text_box .inner_bg {

    width: 100%;

  }

  .voice_mo .voice_list_inner .text_box .voice_inner_text {

    position: relative;

    font-size: 1.6rem;

    border: solid 2px #0080e5;

    padding: 2rem 2rem 2rem 2rem;

  }

  .voice_mo .voice_list_inner {

    display: block;

  }

  .voice_mo .voice_list_inner .img {

    width: 70%;

    margin: auto auto 3rem auto;

  }

  .voice_mo .voice_list_inner .img img {

    width: 55%;

    margin-bottom: 3rem;

  }

  .voice_mo .voice_list_inner .img_text {

    color: #fff;

    text-align: center;

    margin: auto;

    padding: 4px 24px;

    background: url(../images/voice/voice_title_bg.svg) no-repeat;

    background-size: contain;

    background-position: center;

  }

  .voice_mo .voice_list_inner .text_box {

    width: 100%;

  }

  .voice_mo .voice_list_inner .text_box .inner_bg {

    width: auto;

  }

  .voice_mo .voice_list_inner .text_box .voice_inner_text {

    font-size: 1.6rem;

    padding: 2rem 2rem 2rem 2rem;

  }

  .voice_mo .voice_list_inner .text_box .voice_inner_text:after {

    top: -15px;

    left: 50%;

    -webkit-transform: translate(-50%, 0%) rotate(90deg);

    transform: translate(-50%, 0%) rotate(90deg);

  }

  .voice_mo .voice_inner_title {

    font-size: 1.3rem;

    padding: 0rem 2rem 0rem 0rem;

  }

  .voice_mo .voice_inner_title .title_bg {

    padding: 1.5rem 0 1.5rem 9rem;

  }

  .voice_mo .voice_inner_title .title_bg:before {

    /* 斜め飾り */

    left: 5%;

  }

  .voice_mo .voice_inner_title .title_bg:after {

    /* ！マーク */

    width: 3rem;

    height: 4rem;

    top: 30%;

    left: 13%;

    -webkit-transform: translate(0%, -50%);

    transform: translate(0%, -50%);

  }

  .voice_mo .voice_inner_title .title_bg .title_text {

    position: relative;

    z-index: 5;

  }

  .voice_mo .voice_inner_title_area {

    -webkit-transform: translate(-3rem, 0%);

    transform: translate(-3rem, 0%);

  }

  .voice_mo .voice_answer {

    width: auto;

    -webkit-transform: translate(0, 8%);

    transform: translate(0, 8%);

    padding: 2rem 2rem;

  }

}

/* インジケーター

------------------------------------------------------------------------------------------- */

#height-indicator {

  z-index: -1;

  position: fixed;

  width: 50px;

  height: 20vh;

  top: 50%;

  right: 0;

  -webkit-transform: translateY(-50%);

  transform: translateY(-50%);

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  opacity: 0.2;

}

#height-indicator .top-to-bottom {

  width: 3px;

  height: 17.5vh;

  border-radius: 4px;

  background-color: #1d1d1d;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  position: relative;

}

#height-indicator .top-to-bottom a {

  position: absolute;

  -webkit-transform: translate(-50%, -4.5px);

  transform: translate(-50%, -4.5px);

  left: 50%;

  width: 9px;

  height: 9px;

  border-radius: 50%;

  background-color: #1d1d1d;

}

#height-indicator .top-to-bottom span {

  position: absolute;

  top: 0%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background-color: white;

  -webkit-transition: 0.5s;

  transition: 0.5s;

}



/* company 

------------------------------------------------------------------------------------------- */

.about_us {

  margin-top: 70px;

}

.about_us_title {

  font-weight: normal;

  position: relative;

  top: -4rem;

  z-index: 10;

  color: #fff;

}

.about_us_title > span {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

}

.about_us_title .big {

  display: block;

  font-size: 5rem;

  font-style: italic;

  margin-right: 4rem;

  margin-top: -0.5rem;

}

.about_us_title_inner:before {

  content: "";

  background: -webkit-gradient(linear, left top, right top, from(#0080e5), color-stop(24%, #0080e5), to(#004e9d));

  background: linear-gradient(to right, #0080e5 0%, #0080e5 24%, #004e9d 100%);

  -webkit-transform: skew(-30deg);

  transform: skew(-30deg);

  width: 84%;

  height: 8rem;

  position: absolute;

  top: 0;

  left: -50%;

  z-index: -1;

}



@media screen and (max-width: 1300px) {

  .about_us_title {

    margin-left: 5%;

  }

  .about_us_title_inner:before {

    width: 30em;

    left: -7rem;

  }

}

@media screen and (max-width: 960px) {

  .about_us_title .big {

    font-size: 3rem;

  }

  .about_us_title_inner:before {

    width: 30em;

    height: 4rem;

    left: -7rem;

  }

}

.about_us_cont {

  padding: 83px 0px 250px 0;

}

.about_us_cont_title {

  margin-left: 5rem;

  font-size: 3.5rem;

  color: #0080e5;

  position: relative;

  display: inline-block;

  font-style: italic;

}

.about_us_cont_title:before {

  content: "";

  position: absolute;

  width: 140%;

  height: 6rem;

  border: solid 1px #0080e5;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%) skew(-30deg);

  transform: translate(-50%, -50%) skew(-30deg);

}

.about_us_cont_title_main {

  padding: 40px 0 0;

  margin-bottom: 40px;

}

.about_us_cont_flex + .about_us_cont_flex {

  padding-top: 250px;

}

.about_us_cont_flex {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between;

  position: relative;

  margin-right: calc(-50vw + 50%);

  z-index: 2;

}

.about_us_cont_flex:before {

  content: "";

  background: url(../images/company/greeting_bg.svg) no-repeat;

  background-size: contain;

  background-position: right;

  /* 	width: 100%;

  height: 23rem; */

  position: absolute;

  /* bottom: -20rem; */

  /* right: -30%; */

  opacity: 0.2;

  width: 63vw;

  height: 10vw;

  bottom: -7vw;

  right: 0;

  z-index: -1;

}

.about_us_cont_flex .text_box {

  /* 	width: 50%; */

  width: 600px;

}

.about_us_cont_flex .img {

  /*width: 62%;*/

  width: calc(100% - 700px);

  /*position: absolute;*/

  position: relative;

  overflow: hidden;

  /*right: -20%; */

  right: 0;

  height: 530px;

  /* &:before {

  	content: "";

  	border: 525px solid rgba(0, 0, 0, 0);



  	transform: rotate(-22deg);

  	border-left: 293px solid $bg_gray;

  	top: 50%;

  	box-sizing: border-box;

  	position: absolute;

  	top: -568px;

  	left: -220px;

  } */

}

.about_us_cont_flex .img img {

  width: 100%;

  height: 100%;

  display: block;

  -o-object-fit: cover;

  object-fit: cover;

  -o-object-position: left center;

  object-position: left center;

}

.about_us_cont_flex:nth-child(even) {

  -webkit-box-align: start;

  -ms-flex-align: start;

  align-items: flex-start;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: reverse;

  -ms-flex-direction: row-reverse;

  flex-direction: row-reverse;

  margin-right: 0;

  margin-left: calc(-50vw + 50%);

}

.about_us_cont_flex:nth-child(even):before {

  background-position: left;

  right: auto;

  /* left: -30%; */

  left: 0;

  -webkit-transform: scale(-1, 1);

  transform: scale(-1, 1);

}

.about_us_cont_flex:nth-child(even) .img {

  /* width: 62%;*/

  width: calc(100% - 700px);

  right: auto;

  /*left: -20%; */

  left: 0;

}

.about_us_cont_flex:nth-child(even) .img img {

  -o-object-position: right center;

  object-position: right center;

}



@media screen and (min-width: 1600px) {

  .about_us_cont {

    margin: 0 -100px 0 -100px;

  }

}

@media screen and (max-width: 1300px) {

  .about_us_cont .text_box {

    margin: auto 5%;

  }

}

@media screen and (max-width: 1200px) {

  .about_us_cont_flex .text_box {

    width: 50%;

  }

  .about_us_cont_flex .img {

    width: 43%;

    height: 43vw;

  }

  .about_us_cont_flex:nth-child(even) .img {

    width: 42%;

  }

}

@media screen and (max-width: 960px) {

  .about_us_cont {

    padding: 20px 0 120px 0;

  }

  .about_us_cont_title {

    margin-left: 3.5rem;

    font-size: 2.4rem;

  }

  .about_us_cont_title:before {

    width: 140%;

    height: 4rem;

  }

}

@media screen and (max-width: 680px) {

  .about_us_cont {

    padding: 10px 0px 60px 0;

  }

  .about_us_cont_title_main {

    padding: 20px 0 0;

    margin-bottom: 20px;

  }

  .about_us_cont_flex + .about_us_cont_flex {

    padding-top: 80px;

  }

  .about_us_cont_flex {

    display: block;

  }

  .about_us_cont_flex .text_box {

    width: auto;

  }

  .about_us_cont_flex .img {

    margin: 20px 0 auto auto;

    width: 80%;

    position: static;

    height: auto;

  }

  .about_us_cont_flex:before {

    background-position: right;

    right: auto;

    left: 0;

    -webkit-transform: scale(-1, 1);

    transform: scale(-1, 1);

    /* bottom: -10rem;*/

    bottom: -10vw;

    width: 90vw;

    height: 14vw;

  }

  .about_us_cont_flex:nth-child(even):before {

    background-position: right;

    /*right: auto;*/

    /*left: 0;*/

    right: 0;

    left: inherit;

    -webkit-transform: scale(1, -1);

    transform: scale(1, -1);

  }

  .about_us_cont_flex:nth-child(even) .img {

    width: 80%;

    margin: 20px auto auto 0;

  }

}

.company_trade {

  position: relative;

  margin: 30px auto;

  padding: 30px;

  width: 100%;

  background: #f0f0f0;

}

.company_trade_main {

  max-width: 1000px;

  position: relative;

  margin: 50px auto;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

}

.company_trade_main_list {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  flex-direction: column;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

}

.company_trade_main_list_text {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  margin-bottom: 15px;

  font-size: 2rem;

}

.company_trade_main_list_circle {

  margin: 0 auto;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  height: 180px;

  width: 180px;

  border-radius: 50%;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  flex-direction: column;

  background: #002076;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

}

.company_trade_main_list_circle_upper {

  font-size: 2rem;

  color: #fff;

}

.company_trade_main_list_circle_middle {

  font-size: 3rem;

  color: #fff;

}

.company_trade_main_list_circle_under {

  font-size: 2rem;

  color: #fff;

}

.company_trade_main_list + .company_trade_main_list {

  margin-left: 5vw;

}

.company_trade_main_img {

  padding: 220px;

  background: url(../images/trade.svg) no-repeat;

}

.company_trade_since {

  position: absolute;

  left: 0px;

  z-index: -1;

  bottom: -100px;

  font-size: 20rem;

  color: #707070;

  opacity: 0.1 !important;

}



.company_spy {

  margin-top: 0;

  width: 100%;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

}

.company_spy_box + .company_spy_box {

  margin-left: 6%;

}

.company_spy_box {

  width: 47%;

}

.company_spy_box .img {

  height: 175px;

  width: 100%;

  background: #fff;

  border: solid 1px #0175ba;

  position: relative;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  text-align: center;

  margin-bottom: 3rem;

}

.company_spy_box .img.logo img {

  height: 118px;

}

.company_spy_box .img:before {

  content: "";

  background: -webkit-gradient(linear, left top, right top, from(#0080e5), color-stop(24%, #0080e5), to(#004e9d));

  background: linear-gradient(to right, #0080e5 0%, #0080e5 24%, #004e9d 100%);

  width: 100%;

  height: 100%;

  position: absolute;

  left: 7px;

  top: 7px;

  z-index: -1;

}

.company_spy_box .img img {

  height: 93px;

}

.company_spy_box .square {

  font-size: 1.6rem;

}



@media screen and (max-width: 680px) {

  .company_spy {

    display: block;

  }

  .company_spy_box + .company_spy_box {

    margin-left: auto;

    margin-top: 50px;

  }

  .company_spy_box {

    width: auto;

  }

  .company_spy_box .img {

    height: 80px;

  }

  .company_spy_box .img.logo img {

    height: 60px;

  }

  .company_spy_box .img img {

    height: 50px;

  }

  .company_spy .square {

    font-size: 1.3rem;

  }

}

.award_list li + li {

  margin-top: 50px;

}

.award_list li .date_bg {

  position: relative;

  left: -2rem;

  font-style: italic;

  font-size: 1.8rem;

  color: #fff;

  background: url(../images/greeting/greeting_title_bg.svg) no-repeat;

  background-size: cover;

  padding: 50px 70px 50px 104px;

  display: inline-block;

}

.award_list li .date .big {

  display: block;

  font-size: 3rem;

  line-height: 1.2;

}

.award_list li .img_text {

  display: inline-block;

  position: relative;

  bottom: 4rem;

  left: 6.5em;

  color: #fff;

}

.award_list li .img_text span {

  text-align: center;

  display: block;

  padding: 12px 98px;

  background: url(../images/greeting/greeting_title_bg_02.svg) no-repeat;

  background-size: contain;

  background-position: center;

}

.award_list li .img {

  margin: -4em 0 auto auto;

  max-width: 87%;

  font-size: 1.3rem;

}

.award_list li .img img {

  width: 100%;

  margin-bottom: 10px;

}

.award_list li .img_flex {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

}

.award_list li .img_flex > * {

  margin-right: 3%;

  margin-bottom: 3%;

}

.award_list li .img_flex > *:nth-child(2n) {

  margin-right: 0;

}



@media screen and (max-width: 1050px) {

  .award_list li .img {

    max-width: 95%;

  }

}

@media screen and (max-width: 960px) {

  .award_list li .img {

    display: block;

    max-width: 90%;

  }

	.award_list li .img_text {

	  display: inline-block;

	  position: relative;

	  bottom: 4rem;

	  left: 6.5em;

	  color: #fff;
	  fonti-size:2rem;
	}


.award_list li .date_bg {

  position: relative;

  left: -2rem;

  font-style: italic;

  font-size: 1.1rem;

  color: #fff;

  background: url(../images/greeting/greeting_title_bg.svg) no-repeat;

  background-size: cover;

  padding: 30px 40px 30px 80px;

  display: inline-block;

}

.award_list li .date .big {

  display: block;

  font-size: 1.8rem;

  line-height: 1.2;

}

}

@media screen and (max-width: 960px) {

  .award_list li .img {

    display: block;

    max-width: 90%;

  }

	.award_list li .img_text {

	  display: inline-block;

	  position: relative;

	  bottom: 4rem;

	  left: 6.5em;

	  color: #fff;
	  fonti-size:1.2rem;
	}

}

@media screen and (max-width: 480px) {

  .award_list li .img {

    display: block;

    max-width: 90%;

  }

	.award_list li .img_text {

	  display: inline-block;

	  position: relative;

	  bottom: 4rem;

	  left: 6.5em;

	  color: #fff;
	  fonti-size:2rem;
	}

}

/* グラフ

---------------------------------------------------------------------------------------------- */

/* 基本のアニメーション */

@-webkit-keyframes com_fade {

  /*下から*/

  0% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}

@keyframes com_fade {

  /*下から*/

  0% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}

@-webkit-keyframes com_fade_up {

  /*下から*/

  0% {

    -webkit-transform: translateY(30px);

    transform: translateY(30px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateY(0px);

    transform: translateY(0px);

    opacity: 1;

  }

}

@keyframes com_fade_up {

  /*下から*/

  0% {

    -webkit-transform: translateY(30px);

    transform: translateY(30px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translateY(0px);

    transform: translateY(0px);

    opacity: 1;

  }

}

@-webkit-keyframes com_num_fade_up {

  /*下から*/

  0% {

    -webkit-transform: translate(-50%, 30px);

    transform: translate(-50%, 30px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translate(-50%, 0px);

    transform: translate(-50%, 0px);

    opacity: 1;

  }

}

@keyframes com_num_fade_up {

  /*下から*/

  0% {

    -webkit-transform: translate(-50%, 30px);

    transform: translate(-50%, 30px);

    opacity: 0;

  }

  100% {

    -webkit-transform: translate(-50%, 0px);

    transform: translate(-50%, 0px);

    opacity: 1;

  }

}

@-webkit-keyframes com_scale_up {

  /*大きさ変えながら*/

  0% {

    -webkit-transform: scale(2.2);

    transform: scale(2.2);

    opacity: 0;

  }

  100% {

    -webkit-transform: scale(1.1);

    transform: scale(1.1);

    opacity: 1;

  }

}

@keyframes com_scale_up {

  /*大きさ変えながら*/

  0% {

    -webkit-transform: scale(2.2);

    transform: scale(2.2);

    opacity: 0;

  }

  100% {

    -webkit-transform: scale(1.1);

    transform: scale(1.1);

    opacity: 1;

  }

}

/*棒グラフ 1

--------------------------------------------*/

@-webkit-keyframes com_line_up_01 {

  0% {

    height: 0;

    opacity: 0;

  }

  100% {

    height: 75px;

    opacity: 1;

  }

}

@keyframes com_line_up_01 {

  0% {

    height: 0;

    opacity: 0;

  }

  100% {

    height: 75px;

    opacity: 1;

  }

}

@-webkit-keyframes com_line_up_02 {

  /*棒グラフ*/

  0% {

    height: 0;

    opacity: 0;

  }

  100% {

    height: 150px;

    opacity: 1;

  }

}

@keyframes com_line_up_02 {

  /*棒グラフ*/

  0% {

    height: 0;

    opacity: 0;

  }

  100% {

    height: 150px;

    opacity: 1;

  }

}

@-webkit-keyframes com_line_up_03 {

  /*棒グラフ*/

  0% {

    height: 0;

    opacity: 0;

  }

  100% {

    height: 225px;

    opacity: 1;

  }

}

@keyframes com_line_up_03 {

  /*棒グラフ*/

  0% {

    height: 0;

    opacity: 0;

  }

  100% {

    height: 225px;

    opacity: 1;

  }

}

@-webkit-keyframes com_line_up_04 {

  /*棒グラフ*/

  0% {

    height: 0;

    opacity: 0;

  }

  100% {

    height: 280px;

    opacity: 1;

  }

}

@keyframes com_line_up_04 {

  /*棒グラフ*/

  0% {

    height: 0;

    opacity: 0;

  }

  100% {

    height: 280px;

    opacity: 1;

  }

}

@-webkit-keyframes com_line_up_05 {

  /*棒グラフ*/

  0% {

    height: 0;

    opacity: 0;

  }

  100% {

    height: 330px;

    opacity: 1;

  }

}

@keyframes com_line_up_05 {

  /*棒グラフ*/

  0% {

    height: 0;

    opacity: 0;

  }

  100% {

    height: 330px;

    opacity: 1;

  }

}

/*棒グラフ 2

--------------------------------------------*/

@-webkit-keyframes com_line_up_2_04 {

  /*棒グラフ*/

  0% {

    height: 0;

    opacity: 0;

  }

  100% {

    height: 300px;

    opacity: 1;

  }

}

@keyframes com_line_up_2_04 {

  /*棒グラフ*/

  0% {

    height: 0;

    opacity: 0;

  }

  100% {

    height: 300px;

    opacity: 1;

  }

}

/*棒グラフ 3

--------------------------------------------*/

@-webkit-keyframes com_line_up_3_01 {

  0% {

    height: 0;

    opacity: 0;

  }

  100% {

    height: 125px;

    opacity: 1;

  }

}

@keyframes com_line_up_3_01 {

  0% {

    height: 0;

    opacity: 0;

  }

  100% {

    height: 125px;

    opacity: 1;

  }

}

@-webkit-keyframes com_line_up_3_02 {

  /*棒グラフ*/

  0% {

    height: 0;

    opacity: 0;

  }

  100% {

    height: 150px;

    opacity: 1;

  }

}

@keyframes com_line_up_3_02 {

  /*棒グラフ*/

  0% {

    height: 0;

    opacity: 0;

  }

  100% {

    height: 150px;

    opacity: 1;

  }

}

@-webkit-keyframes com_line_up_3_03 {

  /*棒グラフ*/

  0% {

    height: 0;

    opacity: 0;

  }

  100% {

    height: 200px;

    opacity: 1;

  }

}

@keyframes com_line_up_3_03 {

  /*棒グラフ*/

  0% {

    height: 0;

    opacity: 0;

  }

  100% {

    height: 200px;

    opacity: 1;

  }

}

@-webkit-keyframes com_line_up_3_04 {

  /*棒グラフ*/

  0% {

    height: 0;

    opacity: 0;

  }

  100% {

    height: 235px;

    opacity: 1;

  }

}

@keyframes com_line_up_3_04 {

  /*棒グラフ*/

  0% {

    height: 0;

    opacity: 0;

  }

  100% {

    height: 235px;

    opacity: 1;

  }

}

/*sp時グラフの高さ調整

--------------------------------------------------------------- */

@media screen and (max-width: 960px) {

  /*棒グラフ 1 sp

  --------------------------------------------*/

  @-webkit-keyframes com_line_up_01_sp {

    0% {

      height: 0;

      opacity: 0;

    }

    100% {

      height: 10vw;

      opacity: 1;

    }

  }

  @keyframes com_line_up_01_sp {

    0% {

      height: 0;

      opacity: 0;

    }

    100% {

      height: 10vw;

      opacity: 1;

    }

  }

  @-webkit-keyframes com_line_up_02_sp {

    /*棒グラフ*/

    0% {

      height: 0;

      opacity: 0;

    }

    100% {

      height: 18vw;

      opacity: 1;

    }

  }

  @keyframes com_line_up_02_sp {

    /*棒グラフ*/

    0% {

      height: 0;

      opacity: 0;

    }

    100% {

      height: 18vw;

      opacity: 1;

    }

  }

  @-webkit-keyframes com_line_up_03_sp {

    /*棒グラフ*/

    0% {

      height: 0;

      opacity: 0;

    }

    100% {

      height: 26vw;

      opacity: 1;

    }

  }

  @keyframes com_line_up_03_sp {

    /*棒グラフ*/

    0% {

      height: 0;

      opacity: 0;

    }

    100% {

      height: 26vw;

      opacity: 1;

    }

  }

  @-webkit-keyframes com_line_up_04_sp {

    /*棒グラフ*/

    0% {

      height: 0;

      opacity: 0;

    }

    100% {

      height: 31vw;

      opacity: 1;

    }

  }

  @keyframes com_line_up_04_sp {

    /*棒グラフ*/

    0% {

      height: 0;

      opacity: 0;

    }

    100% {

      height: 31vw;

      opacity: 1;

    }

  }

  @-webkit-keyframes com_line_up_05_sp {

    /*棒グラフ*/

    0% {

      height: 0;

      opacity: 0;

    }

    100% {

      height: 37vw;

      opacity: 1;

    }

  }

  @keyframes com_line_up_05_sp {

    /*棒グラフ*/

    0% {

      height: 0;

      opacity: 0;

    }

    100% {

      height: 37vw;

      opacity: 1;

    }

  }

  /*棒グラフ 2 sp

  --------------------------------------------*/

  @-webkit-keyframes com_line_up_2_04_sp {

    /*棒グラフ*/

    0% {

      height: 0;

      opacity: 0;

    }

    100% {

      height: 34vw;

      opacity: 1;

    }

  }

  @keyframes com_line_up_2_04_sp {

    /*棒グラフ*/

    0% {

      height: 0;

      opacity: 0;

    }

    100% {

      height: 34vw;

      opacity: 1;

    }

  }

  /*棒グラフ 3 sp

  --------------------------------------------*/

  @-webkit-keyframes com_line_up_3_01_sp {

    0% {

      height: 0;

      opacity: 0;

    }

    100% {

      height: 13vw;

      opacity: 1;

    }

  }

  @keyframes com_line_up_3_01_sp {

    0% {

      height: 0;

      opacity: 0;

    }

    100% {

      height: 13vw;

      opacity: 1;

    }

  }

  @-webkit-keyframes com_line_up_3_02_sp {

    /*棒グラフ*/

    0% {

      height: 0;

      opacity: 0;

    }

    100% {

      height: 16vw;

      opacity: 1;

    }

  }

  @keyframes com_line_up_3_02_sp {

    /*棒グラフ*/

    0% {

      height: 0;

      opacity: 0;

    }

    100% {

      height: 16vw;

      opacity: 1;

    }

  }

  @-webkit-keyframes com_line_up_3_03_sp {

    /*棒グラフ*/

    0% {

      height: 0;

      opacity: 0;

    }

    100% {

      height: 21vw;

      opacity: 1;

    }

  }

  @keyframes com_line_up_3_03_sp {

    /*棒グラフ*/

    0% {

      height: 0;

      opacity: 0;

    }

    100% {

      height: 21vw;

      opacity: 1;

    }

  }

  @-webkit-keyframes com_line_up_3_04_sp {

    /*棒グラフ*/

    0% {

      height: 0;

      opacity: 0;

    }

    100% {

      height: 25vw;

      opacity: 1;

    }

  }

  @keyframes com_line_up_3_04_sp {

    /*棒グラフ*/

    0% {

      height: 0;

      opacity: 0;

    }

    100% {

      height: 25vw;

      opacity: 1;

    }

  }

}

/* graph_list 

-------------------------------------------------------------------------*/

.graph_list {

  /* アニメーション

  -------------------------------------------------------- */

}

.graph_list > li + li {

  margin-top: 10%;

}

.graph_list > li {

  overflow: hidden;

}

.graph_list_inner {

  position: relative;

}

.graph_list_inner img {

  width: 100%;

}

.graph_list_inner > * {

  opacity: 0;

}

.graph_list_inner .graph_item_title {

  position: absolute;

  top: 30px;

  left: 50px;

}

.graph_list_inner .graph_item_balloon {

  position: absolute;

  top: 80px;

  right: 30px;

  width: 146px;

}

.graph_list_inner .graph_item_arrow {

  position: absolute;

  top: 20px;

  left: 90px;

  width: 706px;

}

.graph_list_inner .graph_item_num {

  position: absolute;

  bottom: 10px;

  width: 800px;

  left: 50%;

  -webkit-transform: translate(-50%, 0%);

  transform: translate(-50%, 0%);

}

@media screen and (max-width: 960px) {

  .graph_list .graph_list_inner .graph_item_title {

    top: 5vw;

    left: 5vw;

    width: 30%;

  }

  .graph_list .graph_list_inner .graph_item_balloon {

    top: 15vw;

    right: 2vw;

    width: 15%;

    z-index: 1;

  }

  .graph_list .graph_list_inner .graph_item_arrow {

    top: 3vw;

    top: 3%;

    width: 85%;

    left: 50%;

    -webkit-transform: translate(-50%, 0%);

    transform: translate(-50%, 0%);

  }

  .graph_list .graph_list_inner .graph_item_num {

    bottom: 1vw;

    width: 90%;

    left: 50%;

    -webkit-transform: translate(-50%, 0%);

    transform: translate(-50%, 0%);

  }

}

.graph_list .view-active .graph_item_bg {

  -webkit-animation: com_fade 0.5s 1 forwards;

  animation: com_fade 0.5s 1 forwards;

}

.graph_list .view-active .graph_item_title {

  -webkit-animation: com_fade_up 0.5s 1 forwards;

  animation: com_fade_up 0.5s 1 forwards;

  -webkit-animation-delay: 0.8s;

  animation-delay: 0.8s;

}

.graph_list .view-active .graph_item_balloon {

  -webkit-animation: com_scale_up 0.8s 1 forwards;

  animation: com_scale_up 0.8s 1 forwards;

  -webkit-animation-delay: 1s;

  animation-delay: 1s;

}

.graph_list .view-active .graph_item_num {

  -webkit-animation: com_num_fade_up 0.5s 1 forwards;

  animation: com_num_fade_up 0.5s 1 forwards;

  -webkit-animation-delay: 2s;

  animation-delay: 2s;

}

.graph_list .view-active .graph_item_arrow {

  -webkit-animation: com_fade 0.5s 1 forwards;

  animation: com_fade 0.5s 1 forwards;

  -webkit-animation-delay: 2.5s;

  animation-delay: 2.5s;

}



/* グラフ棒 */

.graph_list_line {

  /*基準 国内在庫元数 */

}

.graph_list_line_box {

  position: absolute;

  width: 800px;

  /* 	border: solid 1px red; */

  left: 50%;

  -webkit-transform: translate(-50%, 0%);

  transform: translate(-50%, 0%);

  bottom: 50px;

}

.graph_list_line_box * {

  opacity: 0;

  position: absolute;

  width: 50px;

  bottom: -20px;

}

.graph_list_line_01 {

  background: #58addd;

  left: 136px;

}

.graph_list_line_02 {

  background: #419bd8;

  left: 255px;

}

.graph_list_line_03 {

  background: #2582ce;

  left: 374px;

}

.graph_list_line_04 {

  background: #1b6dbf;

  left: 495px;

}

.graph_list_line_05 {

  background: #00479b;

  left: 614px;

}



@media screen and (max-width: 960px) {

  /*基準 国内在庫元数 */

  .graph_list_line_box {

    width: 90%;

    margin: auto;

    bottom: 6vw;

  }

  .graph_list_line_box * {

    width: 5vw;

    bottom: -5vw;

  }

  .graph_list_line_01 {

    left: 14.5vw;

  }

  .graph_list_line_02 {

    left: 27vw;

  }

  .graph_list_line_03 {

    left: 40.5vw;

  }

  .graph_list_line_04 {

    left: 53vw;

  }

  .graph_list_line_05 {

    left: 66vw;

  }

}

/* アニメーション */

.graph_list {

  /*基準 国内在庫元数 */

}

.graph_list .view-active .graph_list_line_box {

  opacity: 1 !important;

}

.graph_list .view-active .graph_list_line_01 {

  -webkit-animation: com_line_up_01 0.5s 1 forwards;

  animation: com_line_up_01 0.5s 1 forwards;

  -webkit-animation-delay: 2.5s;

  animation-delay: 2.5s;

}

.graph_list .view-active .graph_list_line_02 {

  -webkit-animation: com_line_up_02 0.5s 1 forwards;

  animation: com_line_up_02 0.5s 1 forwards;

  -webkit-animation-delay: 2.5s;

  animation-delay: 2.5s;

}

.graph_list .view-active .graph_list_line_03 {

  -webkit-animation: com_line_up_03 0.5s 1 forwards;

  animation: com_line_up_03 0.5s 1 forwards;

  -webkit-animation-delay: 2.5s;

  animation-delay: 2.5s;

}

.graph_list .view-active .graph_list_line_04 {

  -webkit-animation: com_line_up_04 0.5s 1 forwards;

  animation: com_line_up_04 0.5s 1 forwards;

  -webkit-animation-delay: 2.5s;

  animation-delay: 2.5s;

}

.graph_list .view-active .graph_list_line_05 {

  -webkit-animation: com_line_up_05 0.5s 1 forwards;

  animation: com_line_up_05 0.5s 1 forwards;

  -webkit-animation-delay: 2.5s;

  animation-delay: 2.5s;

}



@media screen and (max-width: 960px) {

  /*基準 国内在庫元数 tabsp*/

  .graph_list .view-active .graph_list_line_01 {

    -webkit-animation: com_line_up_01_sp 0.5s 1 forwards;

    animation: com_line_up_01_sp 0.5s 1 forwards;

    -webkit-animation-delay: 2.5s;

    animation-delay: 2.5s;

  }

  .graph_list .view-active .graph_list_line_02 {

    -webkit-animation: com_line_up_02_sp 0.5s 1 forwards;

    animation: com_line_up_02_sp 0.5s 1 forwards;

    -webkit-animation-delay: 2.5s;

    animation-delay: 2.5s;

  }

  .graph_list .view-active .graph_list_line_03 {

    -webkit-animation: com_line_up_03_sp 0.5s 1 forwards;

    animation: com_line_up_03_sp 0.5s 1 forwards;

    -webkit-animation-delay: 2.5s;

    animation-delay: 2.5s;

  }

  .graph_list .view-active .graph_list_line_04 {

    -webkit-animation: com_line_up_04_sp 0.5s 1 forwards;

    animation: com_line_up_04_sp 0.5s 1 forwards;

    -webkit-animation-delay: 2.5s;

    animation-delay: 2.5s;

  }

  .graph_list .view-active .graph_list_line_05 {

    -webkit-animation: com_line_up_05_sp 0.5s 1 forwards;

    animation: com_line_up_05_sp 0.5s 1 forwards;

    -webkit-animation-delay: 2.5s;

    animation-delay: 2.5s;

  }

}

/* 色ごと */

.graph_list_inner {

  /* 登録顧客数 */

  /* 見積依頼累計数 */

}

.graph_list_inner.graph_green .graph_list_line_box * {

  bottom: 0px;

}

.graph_list_inner.graph_green .graph_list_line_01 {

  background: #81d3c5;

}

.graph_list_inner.graph_green .graph_list_line_02 {

  background: #5ad1c0;

}

.graph_list_inner.graph_green .graph_list_line_03 {

  background: #24bcaa;

}

.graph_list_inner.graph_green .graph_list_line_04 {

  background: #11aa94;

}

.graph_list_inner.graph_green .graph_list_line_05 {

  background: #008272;

}

.graph_list_inner.graph_blue .graph_list_line_box * {

  bottom: 0px;

}

.graph_list_inner.graph_blue .graph_list_line_01 {

  background: #58cadd;

  left: 153px;

}

.graph_list_inner.graph_blue .graph_list_line_02 {

  background: #37afd3;

  left: 314px;

}

.graph_list_inner.graph_blue .graph_list_line_03 {

  background: #1b98c9;

  left: 469px;

}

.graph_list_inner.graph_blue .graph_list_line_04 {

  background: #027ebc;

  left: 612px;

}



/* 色ごと tabsp*/

@media screen and (max-width: 960px) {

  .graph_list_inner {

    /* 登録顧客数 */

    /* 見積依頼累計数 */

  }

  .graph_list_inner.graph_green .graph_list_line_box * {

    bottom: -2vw;

  }

  .graph_list_inner.graph_blue .graph_list_line_box * {

    bottom: 0vw;

  }

  .graph_list_inner.graph_blue .graph_list_line_01 {

    left: 17vw;

  }

  .graph_list_inner.graph_blue .graph_list_line_02 {

    left: 33vw;

  }

  .graph_list_inner.graph_blue .graph_list_line_03 {

    left: 50.5vw;

  }

  .graph_list_inner.graph_blue .graph_list_line_04 {

    left: 66vw;

  }

}

/*色ごと アニメーション */

.graph_list .view-active .graph_green .graph_list_line_04 {

  -webkit-animation: com_line_up_2_04 0.5s 1 forwards;

  animation: com_line_up_2_04 0.5s 1 forwards;

  -webkit-animation-delay: 2.5s;

  animation-delay: 2.5s;

}

.graph_list .view-active .graph_blue .graph_list_line_01 {

  -webkit-animation: com_line_up_3_01 0.5s 1 forwards;

  animation: com_line_up_3_01 0.5s 1 forwards;

  -webkit-animation-delay: 2.5s;

  animation-delay: 2.5s;

}

.graph_list .view-active .graph_blue .graph_list_line_02 {

  -webkit-animation: com_line_up_3_02 0.5s 1 forwards;

  animation: com_line_up_3_02 0.5s 1 forwards;

  -webkit-animation-delay: 2.5s;

  animation-delay: 2.5s;

}

.graph_list .view-active .graph_blue .graph_list_line_03 {

  -webkit-animation: com_line_up_3_03 0.5s 1 forwards;

  animation: com_line_up_3_03 0.5s 1 forwards;

  -webkit-animation-delay: 2.5s;

  animation-delay: 2.5s;

}

.graph_list .view-active .graph_blue .graph_list_line_04 {

  -webkit-animation: com_line_up_3_04 0.5s 1 forwards;

  animation: com_line_up_3_04 0.5s 1 forwards;

  -webkit-animation-delay: 2.5s;

  animation-delay: 2.5s;

}



/*色ごと アニメーション　tabsp */

@media screen and (max-width: 960px) {

  .graph_list .view-active .graph_green .graph_list_line_04 {

    -webkit-animation: com_line_up_2_04_sp 0.5s 1 forwards;

    animation: com_line_up_2_04_sp 0.5s 1 forwards;

    -webkit-animation-delay: 2.5s;

    animation-delay: 2.5s;

  }

  .graph_list .view-active .graph_blue .graph_list_line_01 {

    -webkit-animation: com_line_up_3_01_sp 0.5s 1 forwards;

    animation: com_line_up_3_01_sp 0.5s 1 forwards;

    -webkit-animation-delay: 2.5s;

    animation-delay: 2.5s;

  }

  .graph_list .view-active .graph_blue .graph_list_line_02 {

    -webkit-animation: com_line_up_3_02_sp 0.5s 1 forwards;

    animation: com_line_up_3_02_sp 0.5s 1 forwards;

    -webkit-animation-delay: 2.5s;

    animation-delay: 2.5s;

  }

  .graph_list .view-active .graph_blue .graph_list_line_03 {

    -webkit-animation: com_line_up_3_03_sp 0.5s 1 forwards;

    animation: com_line_up_3_03_sp 0.5s 1 forwards;

    -webkit-animation-delay: 2.5s;

    animation-delay: 2.5s;

  }

  .graph_list .view-active .graph_blue .graph_list_line_04 {

    -webkit-animation: com_line_up_3_04_sp 0.5s 1 forwards;

    animation: com_line_up_3_04_sp 0.5s 1 forwards;

    -webkit-animation-delay: 2.5s;

    animation-delay: 2.5s;

  }

}

/* 採用　intro  recruit

------------------------------------------------------------------------------------------- */

.recruit_about_bg {

  padding: 100px 0 50px 0;

  color: #fff;

  background: url(../images/intro/recruit_bg.jpg) no-repeat;

  background-size: cover;

}



.recruit_ask_flex {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between;

}

.recruit_ask_list > li {

  margin-bottom: 2rem;

  position: relative;

  z-index: -1;

}

.recruit_ask_list > li:nth-child(2) {

  -webkit-transform: translateX(3rem);

  transform: translateX(3rem);

}

.recruit_ask_list > li:nth-child(3) {

  -webkit-transform: translateX(6rem);

  transform: translateX(6rem);

}

.recruit_ask_list > li:nth-child(4) {

  -webkit-transform: translateX(9rem);

  transform: translateX(9rem);

}

.recruit_ask_list > li:before {

  content: "";

  position: absolute;

  width: 100%;

  height: 100%;

  background: rgb(0, 128, 229);

  background: -webkit-gradient(

    linear,

    left top,

    right top,

    from(rgb(0, 128, 229)),

    color-stop(35%, rgb(0, 128, 229)),

    to(rgb(0, 78, 157))

  );

  background: linear-gradient(90deg, rgb(0, 128, 229) 0%, rgb(0, 128, 229) 35%, rgb(0, 78, 157) 100%);

  -webkit-transform: translate(4px, 4px);

  transform: translate(4px, 4px);

}

.recruit_ask_list > li span {

  display: block;

  font-size: 1.8rem;

  padding: 15px 35px;

  border: solid 1px #1d61a4;

  background: #fff;

  z-index: 100;

  position: relative;

}

.recruit_ask_list > li span:before {

  content: "";

  position: absolute;

  background: url(../images/intro/recruit_ask_tri.svg) no-repeat;

  background-size: contain;

  width: 30px;

  height: 30px;

  left: -1px;

  top: -1px;

}

.recruit_ask .text_box {

  width: 60%;

}

.recruit_ask .img {

  width: 23%;

}



@media screen and (max-width: 680px) {

  .recruit_ask_flex {

    display: block;

  }

  .recruit_ask_list > li {

    margin-bottom: 3rem;

    position: relative;

    z-index: -1;

  }

  .recruit_ask_list > li:nth-child(2) {

    -webkit-transform: translateX(0rem);

    transform: translateX(0rem);

  }

  .recruit_ask_list > li:nth-child(3) {

    -webkit-transform: translateX(0rem);

    transform: translateX(0rem);

  }

  .recruit_ask_list > li:nth-child(4) {

    -webkit-transform: translateX(0rem);

    transform: translateX(0rem);

  }

  .recruit_ask_list > li span {

    display: block;

    font-size: 1.4rem;

    padding: 2rem 2rem;

  }

  .recruit_ask .text_box {

    width: 95%;

    margin: auto;

  }

  .recruit_ask .img {

    width: 60%;

    margin: 7rem auto auto auto;

  }

}

/* hoshin_list_area */

.hoshin_list_area {

  padding: 50px 0;

}

.hoshin_list > li {

  font-size: 1.7rem;

  line-height: 2;

  padding-left: 5rem;

  position: relative;

  margin-bottom: 3rem;

}

.hoshin_list > li:before {

  content: "";

  background: -webkit-gradient(linear, left top, right top, from(#0080e5), color-stop(24%, #0080e5), to(#004e9d));

  background: linear-gradient(to right, #0080e5 0%, #0080e5 24%, #004e9d 100%);

  width: 4rem;

  height: 2px;

  position: absolute;

  top: 2rem;

  left: 0;

}

.hoshin_list > li:nth-child(2) {

  -webkit-transform: translateX(3rem);

  transform: translateX(3rem);

}

.hoshin_list > li:nth-child(3) {

  -webkit-transform: translateX(6rem);

  transform: translateX(6rem);

}

.hoshin_list > li:nth-child(4) {

  -webkit-transform: translateX(9rem);

  transform: translateX(9rem);

}

.hoshin_list > li:last-of-type {

  margin-bottom: 0rem;

}



@media screen and (max-width: 960px) {

  .hoshin_list_area {

    padding: 20px 0;

  }

  .hoshin_list > li {

    font-size: 1.4rem;

  }

  .hoshin_list > li:nth-child(2) {

    -webkit-transform: translateX(0rem);

    transform: translateX(0rem);

  }

  .hoshin_list > li:nth-child(3) {

    -webkit-transform: translateX(0rem);

    transform: translateX(0rem);

  }

  .hoshin_list > li:nth-child(4) {

    -webkit-transform: translateX(0rem);

    transform: translateX(0rem);

  }

}

/*greeting ごあいさつ

------------------------------------------------------------------------------------------------- */

.greeting_flex {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

}

.greeting_flex .img {

  width: 32%;

  margin-right: 8%;

}

.greeting_flex .img span {

  display: block;

  position: relative;

}

.greeting_flex .img span:before {

  position: absolute;

  top: 11%;

  left: 0;

  width: 90%;

  height: 95%;

  opacity: 0.5;

  content: "";

  background: -webkit-gradient(linear, left top, right top, from(#0080e5), color-stop(24%, #0080e5), to(#004e9d));

  background: linear-gradient(to right, #0080e5 0%, #0080e5 24%, #004e9d 100%);

}

.greeting_flex .img img {

  position: relative;

  z-index: 10;

  margin-left: 8%;

  width: 100%;

}

.greeting_flex .text_box {

  width: 55%;

}



@media screen and (max-width: 680px) {

  .greeting_flex {

    display: block;

  }

  .greeting_flex .img {

    width: 50%;

    margin: auto auto 60px auto;

  }

  .greeting_flex .img img {

    text-align: center;

  }

  .greeting_flex .text_box {

    width: auto;

  }

}

/* greeting_name */

.greeting_name {

  font-size: 1.6rem;

  text-align: right;

  max-width: 280px;

  margin: 30px 0 auto auto;

  position: relative;

}

.greeting_name:before {

  content: "";

  width: 150%;

  height: 100%;

  background: #000;

  position: absolute;

  right: -150%;

  top: 0;

}

.greeting_name .greeting_name_bg {

  display: block;

  text-align: right;

  background: url(../images/greeting/greeting_title_bg_02.svg) no-repeat;

  background-size: cover;

  padding: 5px 30px 5px 5px;

  color: #fff;

}

.greeting_name .greeting_name_big {

  display: block;

  font-size: 1.6rem;

}



@media screen and (max-width: 680px) {

  .greeting_name {

    font-size: 1.3rem;

  }

  .greeting_name .greeting_name_big {

    font-size: 1.4rem;

  }

}

/*greeting ごあいさつ 受賞履歴

----------------------------------------------------- */

.greeting_hist {

  background: url(../images/greeting/greeting_bg.svg) no-repeat;

  background-size: 40%;

  background-position: bottom 150px right 0;

}

.greeting_hist_list {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

}

.greeting_hist_list > li {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  flex-direction: column;

  width: 48.5%;

  margin-right: 3%;

  margin-bottom: 130px;

}

.greeting_hist_list > li:nth-child(2n) {

  margin-right: 0%;

}

.greeting_hist_list_title {

  padding-bottom: 160px;

  position: relative;

  z-index: 9;

}

.greeting_hist_list_title .date span {

  font-style: italic;

  font-size: 2.9rem;

  color: #fff;

  background: url(../images/greeting/greeting_title_bg.svg) no-repeat;

  background-size: cover;

  padding: 76px 80px;

}

.greeting_hist_list_title .img {

  top: 0;

  right: 15px;

  position: absolute;

}

.greeting_hist_list_title .img_text {

  z-index: 10;

  position: absolute;

  bottom: -30px;

  right: 10px;

  color: #fff;

}

.greeting_hist_list_title .img_text span {

  text-align: center;

  display: block;

  padding: 15px 59px;

  background: url(../images/greeting/greeting_title_bg_02.svg) no-repeat;

  background-size: contain;

  background-position: center;

}

.greeting_hist_list .text_box {

  background: #f2f2f2;

  border-radius: 8px;

  padding: 70px 30px 30px 30px;

  height: 100%;

  -webkit-box-flex: 1;

  -ms-flex-positive: 1;

  flex-grow: 1;

}

.greeting_hist_list .text_box .small_text {

  font-size: 1.3rem;

}

.greeting_hist_list .text_box .sub_flex {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

}

.greeting_hist_list .text_box .sub_flex > * {

  margin-right: 5%;

}



@media screen and (max-width: 1200px) {

  .greeting_hist_list_title {

    padding-bottom: 17vw;

  }

  .greeting_hist_list_title .date span {

    font-size: 1.5vw;

    padding: 5.3vw 7vw;

  }

  .greeting_hist_list_title .img {

    width: 85%;

    max-width: auto 0 auto auto;

  }

  .greeting_hist_list_title .img_text {

    font-size: 1.3vw;

  }

  .greeting_hist_list .text_box {

    padding: 6vw 30px 30px 30px;

  }

}

@media screen and (max-width: 960px) {

  .greeting_hist_list .text_box .sub_flex {

    display: block;

  }

  .greeting_hist_list .text_box .sub_flex > * {

    text-align: center;

    margin-right: auto;

    margin-bottom: 10px;

  }

  .greeting_hist_list .text_box .sub_flex .small_img {

    width: 70%;

    margin: auto;

  }

.greeting_hist_list_title .img_text span {

  text-align: center;

  display: block;

  padding: 15px 59px;

  background: url(../images/greeting/greeting_title_bg_02.svg) no-repeat;

  background-size: contain;

  background-position: center;

  font-size:10px;

}


}

@media screen and (max-width: 680px) {

  .greeting_hist {

    padding-top: 5vw;

    background: none;

  }

  .greeting_hist_list {

    display: block;

  }

  .greeting_hist_list > li {

    width: auto;

    margin-right: auto;

    margin-bottom: 60px;

  }

  .greeting_hist_list > li:nth-child(2n) {

    margin-right: auto;

  }

  .greeting_hist_list_title {

    padding-bottom: 32vw;

  }

  .greeting_hist_list_title .date span {

    font-size: 4vw;

    padding: 12vw 13vw;

  }

  .greeting_hist_list_title .img {

    right: 0;

  }

  .greeting_hist_list .text_box {

    padding: 10vw 30px 30px 30px;

  }

}

/* diagonal_title */

.diagonal_title {

  position: relative;

  display: inline-block;

}

.diagonal_title:before {

  content: "";

  position: absolute;

  width: 180%;

  height: 6rem;

  border: solid 1px #000;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%) skew(-30deg);

  transform: translate(-50%, -50%) skew(-30deg);

}



/* 初めての方へ

----------------------------------------------------------------------------------------------------------------------------------------------- */

.blue_text_line span {

  background: -webkit-gradient(linear, left top, right top, from(#0080e5), color-stop(24%, #0080e5), to(#004e9d));

  background: linear-gradient(to right, #0080e5 0%, #0080e5 24%, #004e9d 100%);

  color: #fff;

  /*padding: 3px 10px;*/

}



.biginner_list {

  width: 1400px;

  margin: auto;

}

.biginner_list_inner {

  /* max-width: 1200px; */

  margin: auto auto auto auto;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: start;

  -ms-flex-align: start;

  align-items: flex-start;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between;

}

.biginner_list_inner .text_box {

  /* width: 64%; */

  width: 770px;

}

.biginner_list_inner .img {

  /* width: 30%; */

  width: calc(100% - 830px);

  position: relative;

}

.biginner_list_inner .img img {

  /* width: 150%; */

  -o-object-fit: cover;

  object-fit: cover;

  width: 100%;

  height: 100%;

  display: block;

  position: relative;

  z-index: 1;

}

.biginner_list_inner .img:before {

  z-index: 0;

  content: "";

  position: absolute;

  background: -webkit-gradient(linear, left top, right top, from(#0080e5), color-stop(24%, #0080e5), to(#004e9d));

  background: linear-gradient(to right, #0080e5 0%, #0080e5 24%, #004e9d 100%);

  /* width: 150%;*/

  width: 100%;

  height: 100%;

  top: 30px;

  left: 30px;

}

.biginner_list_inner_title {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

}

.biginner_list_inner_title_ll {

  padding-left: 2.5rem;

}

.biginner_list_inner_title_num {

  font-style: italic;

  font-size: 1.8rem;

}

.biginner_list_inner_title_num_bg {

  display: block;

  text-align: center;

  color: #fff;

  background: url(../images/voice/voice_date_bg.svg) no-repeat;

  background-size: cover;

  padding: 12px 40px 12px 55px;

  line-height: 1.2;

}

.biginner_list_inner_title_num_bg span {

  font-size: 4.3rem;

  display: block;

}

.biginner_list_inner_title .num_big {

  padding-right: 10px;

}

.biginner_list > li {

  padding: 100px 0;

}

.biginner_list > li:nth-child(even) {

  position: relative;

  background: #f2f2f2;

}

.biginner_list > li:nth-child(even):before {

  content: "";

  display: inline-block;

  width: 100vw;

  height: 100%;

  background: #f2f2f2;

  position: absolute;

  top: 0;

  left: calc(-50vw + 50%);

  z-index: -1;

}

.biginner_list > li:nth-child(even) .biginner_list_inner {

  -webkit-box-orient: horizontal;

  -webkit-box-direction: reverse;

  -ms-flex-direction: row-reverse;

  flex-direction: row-reverse;

  margin-right: 0;

}

.biginner_list > li:nth-child(even) .biginner_list_inner .img img {

  /* width: 150%; */

  width: 100%;

  display: block;

  /* transform: translate(-180px, 0px); */

}

.biginner_list > li:nth-child(even) .biginner_list_inner .img:before {

  /* width: 150%;*/

  width: 100%;

  top: 30px;

  left: auto;

  right: 30px;

}

.biginner_list > li:nth-child(even) .problem_box_list > li {

  background: #fff;

}



@media screen and (max-width: 1600px) {

  .biginner_list {

    max-width: 1200px;

    margin: auto;

  }

  .biginner_list_inner {

    margin-right: calc(-50vw + 50%);

  }

  .biginner_list > li:nth-child(even) .biginner_list_inner {

    margin-left: calc(-50vw + 50%);

  }

}

@media screen and (max-width: 1280px) {

  .biginner_list {

    width: 95%;

  }

  .biginner_list_inner {

    /* max-width: 95%; */

    padding: 30px 0 0 0;

  }

  .biginner_list_inner .text_box {

    width: 64%;

  }

  .biginner_list_inner .img {

    width: 30%;

  }

  .biginner_list_inner .img img {

    /* width: 110%; */

    display: block;

  }

  .biginner_list_inner .img:before {

    width: 100%;

    height: 100%;

    top: 20px;

    left: 20px;

  }

}

@media screen and (max-width: 960px) {

  .biginner_list_inner {

    margin-right: 0;

    display: block;

  }

  .biginner_list_inner .text_box {

    width: auto;

  }

  .biginner_list_inner .img {

    margin: 25px auto auto auto;

    max-width: 50%;

    width: auto;

  }

  .biginner_list > li {

    padding: 30px 0 80px 0;

  }

  .biginner_list > li:nth-child(even) .biginner_list_inner {

    margin-left: 0;

  }

  .biginner_list > li:nth-child(even) .img {

    max-width: 50%;

    width: auto;

  }

  .biginner_list > li:nth-child(even) .img:before {

    width: 100% !important;

    height: 100% !important;

    top: 20px !important;

    left: 20px !important;

  }

  .biginner_list > li:nth-child(even) .img img {

    width: 100% !important;

    -webkit-transform: translate(0px, 0px) !important;

    transform: translate(0px, 0px) !important;

  }

}

@media screen and (max-width: 480px) {

  .biginner_list_inner {

    padding: 0px 0 0 0;

  }

  .biginner_list_inner .img {

    max-width: 80%;

  }

  .biginner_list_inner_title {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

  }

  .biginner_list_inner_title_ll {

    padding-left: 1rem;

  }

  .biginner_list_inner_title_num {

    font-style: italic;

    font-size: 1.2rem;

  }

  .biginner_list_inner_title_num_bg {

    padding: 11px 21px 13px 31px;

  }

  .biginner_list_inner_title_num .num_big {

    font-size: 1.7rem;

  }

  .biginner_list_inner .num_big {

    padding-right: 10px;

  }

  .biginner_list > li {

    padding: 20px 0 60px 0;

  }

  .biginner_list > li:first-child {

    padding: 0px 0 60px 0;

  }

  .biginner_list > li:nth-child(even) {

    padding: 20px 0 60px 0;

  }

  .biginner_list > li:nth-child(even) .img {

    max-width: 80% !important;

  }

}

.problem_box_list {

  position: relative;


  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  margin-bottom: 80px;

}

.problem_box_list li {

  min-height: 2em;

  width: 27.5%;

  margin: 0 1%;

  padding: 15px 10px 15px 27px;

  font-size: 1.6rem;

  font-weight: normal;

  border-radius: 10px;

  background: #e7f7f7;

  position: relative;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  -webkit-font-feature-settings: "palt";

  font-feature-settings: "palt";

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-flow: column;

  flex-flow: column;

  line-height: 1.2;

}

.problem_box_list li:before {

  content: "";

  background: url(../images/biginner_moya.svg) no-repeat;

  position: absolute;

  background-size: contain;

  top: 1.5rem;

  left: -10px;

  width: 28px;

  height: 28px;

}

.problem_box_list:before {

  content: "";

  background: url(../images/biginner_arrow.svg) no-repeat;

  height: 20px;

  width: 50px;

  position: absolute;

  bottom: -55px;

  left: 50%;

  -webkit-transform: translate(-50%, 0%);

  transform: translate(-50%, 0%);

}

.problem_box_text {

  margin: auto;

  font-size: 1.7rem;

}

.problem_box_point {

  margin: 50px auto auto auto;

  padding: 0px 0px 10px 0px;

  border: solid 2px #0080e5;

  position: relative;

}

.problem_box_point_list {

  max-width: 95%;

  margin: auto;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

}

.problem_box_point_list li {

  width: 44%;

  margin-right: 2%;

  margin-bottom: 10px;

  position: relative;

  padding-left: 3rem;

}

.problem_box_point_list li:before {

  content: "";

  background: url(../images/biginner_check.svg) no-repeat;

  width: 20px;

  height: 17px;

  background-size: contain;

  position: absolute;

  top: 0.5rem;

  left: 0;

}

.problem_box_point_list li:nth-child(2n) {

  margin-right: 0;

}



@media screen and (max-width: 1024px) {

  .problem_box_point_list li {

    width: 42%;

    padding-left: 5%;

  }

}

@media screen and (max-width: 480px) {

  .problem_box_list {

    max-width: 95%;

    margin: auto auto 50px auto;

    display: block;

  }

  .problem_box_list li {

    margin-bottom: 2%;

    width: auto;

    padding: 15px 5px 15px 26px;

    font-size: 1.6rem;

  }

  .problem_box_list:before {

    bottom: -38px;

  }

  .problem_box_point_list li {

    width: auto;

    margin-right: auto;

    padding-left: 3rem;

  }

  .problem_box_point {

    margin: 30px auto;
    padding:15px;

  }

  .problem_box_text {

    font-size: 1.6rem;

  }

}

.point_title_box {

  margin: 15px auto auto 2rem;
  vertical-align :top;
}



.point_title {

  display: inline-block;

  color: #fff;

  font-size: 1.8rem;

  line-height: 1.9;

  padding: 0 15px 5px 15px;

  font-style: italic;

  position: absolute;

  top: -20px;

  left: 30px;

}

.point_title:before {

  content: "";

  position: absolute;

  background: #0080e5;

  -webkit-transform: skew(-25deg);

  transform: skew(-25deg);

  z-index: -1;

  width: 8rem;

  height: 3.5rem;

  left: 0;

  top: 0;

}



/* howto

------------------------------------------------------------------------------ */

.howto .under_cv_title .br_dis {

  display: none;

}

.howto_btn_list {

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

}

.howto_btn_list li {

  width: 32.2%;

  margin-right: 2%;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  background: -webkit-gradient(linear, left top, right top, from(#0080e5), color-stop(24%, #0080e5), to(#004e9d));

  background: linear-gradient(to right, #0080e5 0%, #0080e5 24%, #004e9d 100%);

}

.howto_btn_list li:last-child {

  margin-right: 0;

}

.howto_btn_list li a {

  font-weight: bold;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  flex-direction: column;

  font-size: 18px;

  color: #fff;

  padding: 25px 0 20px 0;

  line-height: 1.2;

}

.howto_btn_list li a .small {

  font-size: 1.7rem;

}

.howto_btn_list li a > span {

  position: relative;

  background: url(../images/btn_arrow_tri.svg) no-repeat;

  background-size: 12px;

  background-position: top 50% right 15px;

  display: inline-block;

  padding: 0 30px 0 30px;

}

.howto_btn_list li a.btn_arrow_tri {

  padding: 20px 50px 20px 20px !important;

}



@media screen and (max-width: 960px) {

  .howto_btn_list {

    max-width: 70%;

    margin: auto;

    display: block;

  }

  .howto_btn_list li {

    margin-right: auto;

    width: 100%;

  }

  .howto_btn_list li + li {

    margin-top: 10px;

  }

}

@media screen and (max-width: 680px) {

  .howto .under_cv_title .br_dis {

    display: block;

  }

  .howto_btn_list {

    max-width: 100%;

  }

  .howto_btn_list li a {

    font-size: 1.6rem;

    padding: 15px 0 15px 0;

  }

  .howto_btn_list li a .small {

    font-size: 1.3rem;

  }

  .howto_btn_list li + li {

    margin-top: 5px;

  }

}

.howto_cont {

  background: #f2f2f2;

}

.howto_cont_title {

  padding: 50px 0 30px 0;

  color: #fff;

  background: url(../images/howto/local_header_01.jpg) no-repeat;

  background-size: cover;

}

.howto_cont_title_02 {

  background: url(../images/howto/local_header_02.jpg) no-repeat;

  background-size: cover;

}

.howto_cont_title_03 {

  background: url(../images/howto/local_header_03.jpg) no-repeat;

  background-size: cover;

}

.howto_cont_box_inner {

  margin: auto;

  background: #fff;

  -webkit-box-shadow: 0px -5px 5px 3px rgba(0, 0, 0, 0.1);

  box-shadow: 0px -5px 5px 3px rgba(0, 0, 0, 0.1);

  padding: 50px 50px 80px 50px;

}

.howto_cont_box_inner_in {

  max-width: 1000px;

  margin: auto;

}

.howto_cont_sensor {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between;

}

.howto_cont_sensor > li {

  width: 49%;

}

.howto_cont_sensor_inner {

  padding: 20px 15px 15px 10px;

  background: #e8efed;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between;

}

.howto_cont_sensor_num {

  font-style: italic;

  padding: 3px 20px;

  text-align: center;

  font-size: 2.8rem;

  background: #fff;

  color: #707070;

  font-weight: bold;

}

.howto_cont_sensor .text_box {

  width: 70%;

  margin-left: 3%;

}

.howto_cont_sensor .img {

  width: 20%;

}

.howto_cont_sensor .img img {

  height: 50px;

}

.howto_cont_sensor > li:nth-child(2) img {

  -webkit-transform: translate(10px, -15px) scale(1.5, 1.5);

  transform: translate(10px, -15px) scale(1.5, 1.5);

}



@media screen and (max-width: 1300px) {

  .howto_cont_title .diagonal_midashi_title {

    max-width: 85%;

    margin: auto;

  }

  .howto_cont_box_inner {

    margin: 0 2.5%;

    padding: 50px 50px 80px 50px;

  }

  .howto_cont_sensor_num {

    padding: 3px 2vw;

    font-size: 2.8rem;

    background: #fff;

  }

  .howto_cont_sensor .text_box {

    width: 78%;

    margin-left: 2%;

    font-size: 1.3vw;

  }

  .howto_cont_sensor .img {

    width: 15%;

  }

  .howto_cont_sensor .img img {

    height: 5vw;

  }

}

@media screen and (max-width: 960px) {

  .howto_cont:before {

    height: 25vw;

    top: -18vw;

  }

}

@media screen and (max-width: 680px) {

  .howto_cont_box_inner {

    margin: 0 2.5%;

    padding: 50px 3% 60px 3%;

  }

  .howto_cont_box_inner .diagonal_midashi_title {

    font-size: 2rem;

  }

  .howto_cont_box_inner .diagonal_midashi_title .diagonal_midashi_in {

    font-size: 1.6rem;

  }

  .howto_cont_sensor {

    display: block;

  }

  .howto_cont_sensor > li {

    width: auto;

  }

  .howto_cont_sensor > li + li {

    margin-top: 10px;

  }

  .howto_cont_sensor_num {

    padding: 5px 15px;

    font-size: 2rem;

  }

  .howto_cont_sensor .text_box {

    -webkit-font-feature-settings: "palt";

    font-feature-settings: "palt";

    margin-left: 3%;

    font-size: 2.5vw;

  }

  .howto_cont_sensor .img {

    width: 15%;

  }

  .howto_cont_sensor .img img {

    height: 8vw;

  }

  .howto_cont_sensor > li:nth-child(2) img {

    -webkit-transform: translate(10px, -10px) scale(1.5, 1.5);

    transform: translate(10px, -10px) scale(1.5, 1.5);

  }

}

@media screen and (max-width: 480px) {

  .howto_cont_sensor .text_box {

    font-size: 3.1vw;

  }

}

.howto_list > li {

  position: relative;

  padding: 0 0 60px 0;

}

.howto_list > li:before {

  content: "";

  position: absolute;

  height: 100%;

  width: 3px;

  left: 25px;

  top: 65px;

  background: #1d61a4;

}

.howto_list > li:last-of-type {

  padding: 0 0 0px 0;

}

.howto_list > li:last-of-type:before {

  height: 80%;

}

.howto_list_num {

  position: absolute;

  left: -30px;

  top: 0;

  font-style: italic;

  font-size: 1.4rem;

}

.howto_list_num_bg {

  display: block;

  text-align: center;

  color: #fff;

  background: url(../images/voice/voice_date_bg.svg) no-repeat;

  background-size: cover;

  padding: 11px 34px 10px 40px;

  line-height: 1;

}

.howto_list_num_bg span {

  font-size: 3.2rem;

  display: block;

}

.howto_list .num_big {

  padding-right: 10px;

}

.howto_list_inner {

  padding: 0px 0 0px 100px;

}

.howto_list_title {

  font-size: 1.8rem;

  font-weight: normal;

  padding-top: 2rem;

}

.howto_list .img img {

  max-width: 100%;

}

.howto_list_point_area_title {

  position: relative;

  background: #1d61a4;

  font-size: 2rem;

  color: #fff;

  font-weight: bold;

  padding: 15px 0 10px 9rem;

  border-radius: 8px 8px 0 0;

}

.howto_list_point_area_title:before {

  position: absolute;

  content: "";

  background: url(../images/ico_point.svg) no-repeat;

  width: 52px;

  height: 46px;

  left: 32px;

  top: 7px;

}

.howto_list_point_area .text_box {

  padding: 20px 30px;

  background: #e1f7ff;

}

.howto_list_ex_area_inner {

  padding: 25px 25px;

  background: #e7f7f7;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

}

.howto_list_ex_area_title {

  margin-right: 3%;

  width: 8%;

}

.howto_list_ex_area_title img {

  width: 100%;

}

.howto_list_ex_area .text_box {

  width: 89%;

  line-height: 1.8;

  font-size: 1.6rem;

  -webkit-font-feature-settings: "palt";

  font-feature-settings: "palt";

}

.howto_list_moni_area_inner {

  padding: 25px 40px;

  background: #e8f4ff;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

}

.howto_list_moni_area_title {

  margin-right: 4%;

  width: 9%;

}

.howto_list_moni_area_title img {

  width: 100%;

}

.howto_list_moni_area .text_box {

  width: 87%;

  line-height: 1.8;

  font-size: 1.8rem;

  -webkit-font-feature-settings: "palt";

  font-feature-settings: "palt";

}

.howto_list_gray_area_inner {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  padding: 50px 30px;

}

.howto_list_gray_area_inner > * + * {

  margin-left: 4%;

}



@media screen and (max-width: 680px) {

  .howto_list > li {

    position: relative;

    padding: 0 0 60px 0;

  }

  .howto_list > li:before {

    content: "";

    height: 100%;

    left: 15px;

    top: 35px;

  }

  .howto_list > li:last-of-type {

    padding: 0 0 0px 0;

  }

  .howto_list > li:last-of-type:before {

    height: 88%;

  }

  .howto_list_num {

    left: -20px;

    font-size: 1rem;

  }

  .howto_list_num_bg {

    padding: 6px 17px 3px 25px;

  }

  .howto_list_num_bg span {

    font-size: 2rem;

  }

  .howto_list_inner {

    padding: 0px 0 0px 50px;

  }

  .howto_list_title {

    font-size: 1.6rem;

  }

  .howto_list_point_area_title {

    font-size: 1.6rem;

    padding: 15px 0 10px 6rem;

    border-radius: 6px 6px 0 0;

  }

  .howto_list_point_area_title:before {

    width: 39px;

    height: 34px;

    left: 1.8rem;

    top: 7px;

  }

  .howto_list_point_area .text_box {

    padding: 15px 15px;

  }

  .howto_list_ex_area_inner {

    padding: 20px 20px;

    display: block;

  }

  .howto_list_ex_area_title {

    text-align: center;

    margin-right: auto;

    margin: auto auto 1rem auto;

    width: 15%;

  }

  .howto_list_ex_area_title img {

    width: 100%;

  }

  .howto_list_ex_area .text_box {

    width: 100%;

    font-size: 1.3rem;

    -webkit-font-feature-settings: "palt";

    font-feature-settings: "palt";

  }

  .howto_list_moni_area_inner {

    padding: 20px 15px;

  }

  .howto_list_moni_area_title {

    margin-right: 5%;

    width: 15%;

  }

  .howto_list_moni_area_title img {

    width: 100%;

  }

  .howto_list_moni_area .text_box {

    width: 80%;

    font-size: 1.4rem;

  }

  .howto_list_gray_area_inner {

    display: block;

    padding: 20px 15px;

  }

  .howto_list_gray_area_inner > * + * {

    margin-left: auto;

    margin-top: 10px;

  }

  .howto_list_gray_area_inner .btn_blue_l > * {

    display: block;

    text-align: center;

    font-size: 1.4rem;

    padding: 10px 40px 10px 20px !important;

  }

}

/* risk

------------------------------------------------------------------------------ */

.risk_main_area_flex.rev {

  -webkit-box-orient: horizontal;

  -webkit-box-direction: reverse;

  -ms-flex-direction: row-reverse;

  flex-direction: row-reverse;

}

.risk_main_area_flex.rev .img {

  margin-left: 3%;

  margin-right: auto;

}

.risk_main_area_flex.rev .text_box_balloon:before {

  left: auto;

  right: -16.05px;

  -webkit-transform: scale(-1, 1);

  transform: scale(-1, 1);

  top: 30%;

}

.risk_main_area_flex {

  padding: 60px 0 80px 0;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between;

}

.risk_main_area_flex .img {

  width: 22.5%;

  margin-right: 3%;

}

.risk_main_area_flex .img img {

  width: 100%;

}

.risk_main_area_flex .text_box_balloon {

  -webkit-font-feature-settings: "palt";

  font-feature-settings: "palt";

  position: relative;

  width: 73.5%;

  font-size: 1.6rem;

  border: solid 2px #1d61a4;

  -webkit-box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.3);

  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.3);

  border-radius: 10px;

  padding: 20px 20px;

}

.risk_main_area_flex .text_box_balloon:before {

  background: url(../images/risk/balloon_arrow.svg) no-repeat;

  content: "";

  width: 17px;

  height: 15.5px;

  position: absolute;

  left: -16.05px;

  top: 9rem;

}



@media screen and (max-width: 960px) {

  .risk_main_area_flex .img {

    width: 30%;

    margin-right: 3%;

  }

  .risk_main_area_flex .text_box_balloon {

    width: 67%;

    font-size: 1.6rem;

  }

}

@media screen and (max-width: 680px) {

  .risk_main_area_flex.rev .img {

    margin-left: auto;

  }

  .risk_main_area_flex.rev .text_box_balloon:before {

    background: url(../images/risk/balloon_arrow.svg) no-repeat;

    content: "";

    width: 17px;

    height: 15.5px;

    left: 55%;

    top: -15.5px;

    -webkit-transform: rotate(90deg);

    transform: rotate(90deg);

  }

  .risk_main_area_flex {

    padding: 20px 0 50px 0;

    display: block;

  }

  .risk_main_area_flex .img {

    width: 30%;

    margin-right: auto;

    margin-left: auto;

    margin-bottom: 2rem;

  }

  .risk_main_area_flex .text_box_balloon {

    width: auto;

    font-size: 1.3rem;

  }

  .risk_main_area_flex .text_box_balloon:before {

    background: url(../images/risk/balloon_arrow.svg) no-repeat;

    content: "";

    width: 17px;

    height: 15.5px;

    left: 55%;

    top: -15.5px;

    -webkit-transform: rotate(90deg);

    transform: rotate(90deg);

  }

}

.risk_list {

  margin-top: 60px;

}

.risk_list_inner {

  max-width: 1100px;

  margin: auto auto auto auto;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between;

}

.risk_list_inner .text_box {

  width: 53%;

  -webkit-font-feature-settings: "palt";

  font-feature-settings: "palt";

}

.risk_list_inner .img {

  width: 43%;

  position: relative;

}

.risk_list_inner .img img {

  width: 125%;

  display: block;

  position: relative;

  z-index: 1;

  -webkit-transform: translate(48px, 0);

  transform: translate(48px, 0);

}

.risk_list_inner_title {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

}

.risk_list_inner_title_ll {

  margin-top: 1.6rem;

  padding-left: 1.1rem;

  margin-bottom: 5.5rem;

}

.risk_list_inner_title_num {

  font-style: italic;

  font-size: 1.8rem;

}

.risk_list_inner_title_num_bg {

  display: block;

  text-align: center;

  color: #fff;

  background: url(../images/risk/risk_title_bg.svg) no-repeat;

  background-size: cover;

  padding: 17px 34px 17px 43px;

  line-height: 1.2;

}

.risk_list_inner_title_num_bg span {

  font-size: 3.4rem;

  display: block;

}

.risk_list_inner_title .num_big {

  padding-right: 10px;

}

.risk_list_inner .text_in {

  line-height: 2;

  z-index: 1;

  position: relative;

}

.risk_list > li .risk_list_li {

  position: relative;

  background: #efefef;

  padding: 60px 0 150px 0;

}

.risk_list > li .risk_list_li:before {

  position: absolute;

  top: -19.9vw;

  left: 0;

  content: "";

  background: url(../images/risk/risk_tri_pd_01.svg) no-repeat;

  width: 100%;

  height: 20vw;

  background-size: cover;

}

.risk_list > li:nth-child(even) .risk_list_li {

  background: #e2e2e2;

  padding: 30px 0 150px 0;

}

.risk_list > li:nth-child(even) .risk_list_li .risk_list_inner {

  -webkit-box-orient: horizontal;

  -webkit-box-direction: reverse;

  -ms-flex-direction: row-reverse;

  flex-direction: row-reverse;

}

.risk_list > li:nth-child(even) .risk_list_li .risk_list_inner .text_box {

  -webkit-font-feature-settings: normal;

  font-feature-settings: normal;

}

.risk_list > li:nth-child(even) .risk_list_li .risk_list_inner .img img {

  width: 125%;

  display: block;

  -webkit-transform: translate(-168px, -20px);

  transform: translate(-168px, -20px);

}

.risk_list > li:nth-child(even) .risk_list_li:before {

  position: absolute;

  top: -7vw;

  left: 0;

  content: "";

  background: url(../images/risk/risk_tri_pd_02.svg) no-repeat;

  width: 100%;

  height: 7vw;

  background-size: cover;

  z-index: -1;

}



@media screen and (max-width: 1300px) {

  .risk_list {

    margin-top: 60px;

  }

  .risk_list_inner {

    max-width: 95%;

  }

  .risk_list_inner .img {

    width: 43%;

    position: relative;

  }

  .risk_list_inner .img img {

    width: 100%;

    -webkit-transform: translate(0px, 0);

    transform: translate(0px, 0);

  }

  .risk_list > li:nth-child(even) .risk_list_li .img img {

    width: 100%;

    -webkit-transform: translate(0px, -20px);

    transform: translate(0px, -20px);

  }

}

@media screen and (max-width: 960px) {

  .risk_list_inner {

    display: block;

  }

  .risk_list_inner .img {

    width: auto;

  }

  .risk_list_inner .text_box {

    width: auto;

  }

  .risk_list_inner_title_ll {

    margin-top: 1.2rem;

    padding-left: 0.8rem;

    margin-bottom: 4rem;

  }

  .risk_list_inner_title_num {

    font-size: 1.6rem;

  }

  .risk_list_inner_title_num_bg {

    padding: 7px 16px 7px 26px;

  }

  .risk_list_inner_title_num_bg span {

    font-size: 2.8rem;

  }

  .risk_list_inner_title .num_big {

    padding-right: 10px;

  }

  .risk_list > li .risk_list_li {

    padding: 30px 0 60px 0 !important;

  }

  .risk_list > li:nth-child(even) .risk_list_li {

    padding: 30px 0 60px 0 !important;

  }

  .risk_list > li:nth-child(even) .risk_list_li .img img {

    -webkit-transform: translate(0px, 0px) !important;

    transform: translate(0px, 0px) !important;

  }

}

.risk_2 .risk_list > li .risk_list_li {

  background: #eef2f9;

}

.risk_2 .risk_list > li .risk_list_li:before {

  background: url(../images/risk/risk_tri_pd_03.svg) no-repeat;

  width: 100%;

  height: 20vw;

  background-size: cover;

}

.risk_2 .risk_list > li:nth-child(even) .risk_list_li {

  background: #dee2e8;

}

.risk_2 .risk_list > li:nth-child(even) .risk_list_li:before {

  background: url(../images/risk/risk_tri_pd_04.svg) no-repeat;

  width: 100%;

  height: 20vw;

  background-size: cover;

}



.risk_3 .risk_list > li .risk_list_li {

  background: #ececf2;

}

.risk_3 .risk_list > li .risk_list_li:before {

  background: url(../images/risk/risk_tri_pd_05.svg) no-repeat;

  width: 100%;

  height: 20vw;

  background-size: cover;

}

.risk_3 .risk_list > li:nth-child(even) .risk_list_li {

  background: #dedee8;

}

.risk_3 .risk_list > li:nth-child(even) .risk_list_li:before {

  background: url(../images/risk/risk_tri_pd_06.svg) no-repeat;

  width: 100%;

  height: 20vw;

  background-size: cover;

}



/* risk_list_bitter

------------------------------------*/

.risk_list_bitter {

  padding-top: 30px;

  max-width: 1100px;

  margin: auto auto auto auto;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

}

.risk_list_bitter_li .risk_list_li {

  padding-bottom: 100px !important;

}

.risk_list_bitter_title {

  position: relative;

  display: inline-block;

  color: #fff;

  z-index: 4;

  top: -0.5rem;

  left: 4rem;

  font-size: 2.4rem;

  font-weight: normal;

}

.risk_list_bitter_title .normal {

  position: relative;

  z-index: 4;

}

.risk_list_bitter_title .small {

  position: relative;

  font-size: 1.6rem;

  background: rgba(255, 255, 255, 0.4);

  padding: 0px 10px;

  margin-left: 15px;

  z-index: 4;

}

.risk_list_bitter_title_bg {

  display: block;

  z-index: 3;

  position: absolute;

  width: 180%;

  height: 8rem;

  background: -webkit-gradient(linear, left top, right top, from(#0c5c89), to(#000000));

  background: linear-gradient(90deg, #0c5c89 0%, #000000 100%);

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%) skew(-30deg);

  transform: translate(-50%, -50%) skew(-30deg);

}

.risk_list_bitter .img {

  position: relative;

  z-index: 1;

  width: 27%;

}

.risk_list_bitter .img img {

  width: 108%;

  -webkit-transform: translate(0px, 10px);

  transform: translate(0px, 10px);

}

.risk_list_bitter .text_box {

  line-height: 1.8;

  width: 100%;

  font-size: 1.6rem;

}

.risk_list_bitter .text_box .text_in {

  -webkit-box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.3);

  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.3);

  padding: 50px 50px 50px 70px;

  border: solid 2px #000;

  position: relative;

  z-index: 0;

}



@media screen and (max-width: 1200px) {

  .risk_list_bitter {

    max-width: 95%;

  }

  .risk_list_bitter .img {

    width: 27%;

  }

  .risk_list_bitter .img img {

    -webkit-transform: translate(10px, -28px);

    transform: translate(10px, -28px);

  }

  .risk_list_bitter .text_box .text_in {

    padding: 30px 25px 30px 50px;

  }

}

@media screen and (max-width: 680px) {

  .risk_list_bitter {

    padding-top: 0vw !important;

    max-width: 95%;

    display: block;

  }

  .risk_list_bitter_li .risk_list_li {

    padding-top: 0 !important;

    padding-bottom: 50px !important;

  }

  .risk_list_bitter_title {

    top: -19vw;

    left: 35vw;

  }

  .risk_list_bitter_title_bg {

    width: 150%;

    height: 6.5rem;

  }

  .risk_list_bitter .img {

    width: 50% !important;

  }

  .risk_list_bitter .img img {

    width: 100%;

    -webkit-transform: translate(10px, 60px);

    transform: translate(10px, 60px);

  }

  .risk_list_bitter .text_box {

    font-size: 1.3rem;

  }

  .risk_list_bitter .text_box .text_in {

    margin-top: -15vw;

    padding: 10% 5% 5% 20px;

  }

}

/* risk_cv

----------------------------------------------------------------- */

.risk_cv {

  padding: 120px 0;

  background: url(../images/risk/risk_cv_img.jpg) no-repeat;

  background-size: cover;

  background-position: center;

}

.risk_cv_inner {

  max-width: 50%;

  font-size: 1.8rem;

}

.risk_cv_inner span {

  font-size: 1.9rem;

  color: #fff;

  font-weight: bold;

  background: -webkit-gradient(linear, left top, right top, from(#0080e5), color-stop(24%, #0080e5), to(#004e9d));

  background: linear-gradient(to right, #0080e5 0%, #0080e5 24%, #004e9d 100%);

  display: inline-block;

  padding: 3px 8px;

  margin-bottom: 1rem;

}



@media screen and (max-width: 680px) {

  .risk_cv {

    padding: 60px 0;

  }

  .risk_cv_inner {

    font-size: 1.6rem;

    max-width: 100%;

    text-shadow:

      0 0 5px #fff,

      0 0 5px #fff,

      0 0 5px #fff,

      0 0 5px #fff;

  }

  .risk_cv_inner span {

    font-size: 1.8rem;

    text-shadow: none;

  }

}

/* risk_btn_list

----------------------------------------------------------------- */

.risk_btn_list .btn > * {

  border: solid 1px transparent;

  display: -webkit-inline-box;

  display: -ms-inline-flexbox;

  display: inline-flex;

  padding: 0.5em 1.5em;

  color: #fff;

  letter-spacing: 2px;

  -webkit-transition: 0.3s;

  transition: 0.3s;

  /* border-radius: 5px; */

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  background: -webkit-gradient(linear, left top, right top, from(rgb(0, 128, 228)), to(rgb(0, 78, 156)));

  background: linear-gradient(90deg, rgb(0, 128, 228) 0%, rgb(0, 78, 156) 100%);

  font-size: 1.4rem;

  position: relative;

  line-height: 1.5;

  border-radius: 0;

  /* box-shadow: 0px 0px 15px -5px #474747; */

  display: block;

  text-align: center;

}

.risk_btn_list .btn > *:hover,

.risk_btn_list .btn > *.active {

  border: solid 1px #1d61a4;

  display: -webkit-inline-box;

  display: -ms-inline-flexbox;

  display: inline-flex;

  padding: 0.5em 1.5em;

  color: #1d61a4;

  letter-spacing: 2px;

  -webkit-transition: 0.3s;

  transition: 0.3s;

  /* border-radius: 5px; */

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  background: #fff;

  font-size: 1.3rem;

  position: relative;

  line-height: 1.5;

  border-radius: 0;

  /* box-shadow: 0px 0px 15px -5px #474747; */

  display: block;

}

.risk_btn_list .btn > *:hover:after,

.risk_btn_list .btn > *.active:after {

  content: "";

  background: url("../images/arrow_black.svg") no-repeat;

  background-size: contain;

  position: absolute;

  top: 55%;

  -webkit-transform: translate(0%, -50%);

  transform: translate(0%, -50%);

  width: 8px;

  height: 16px;

  right: 15px;

}



@media screen and (max-width: 1200px) {

  .risk_btn_list {

    display: block;

    max-width: 80%;

  }

  .risk_btn_list > li {

    width: auto;

  }

  .risk_btn_list > li + li {

    margin-top: 10px;

  }

}

@media screen and (max-width: 680px) {

  .risk_btn_list {

    display: block;

    max-width: 95%;

  }

}

/* 背景 */

.circuit_bg {

  display: block;

  position: relative;

}

.circuit_bg:before {

  content: "";

  background: url(../images/qa/qa_bg_01.svg) no-repeat;

  width: 310px;

  height: 416px;

  background-size: contain;

  position: absolute;

  top: 25%;

  left: 0;

  display: block;

  z-index: -1;

}

.circuit_bg:after {

  content: "";

  background: url(../images/qa/qa_bg_02.svg) no-repeat;

  width: 338px;

  height: 196px;

  background-size: contain;

  position: absolute;

  bottom: 5%;

  right: 0;

  display: block;

  z-index: -1;

}



@media screen and (max-width: 1000px) {

  .circuit_bg_area:before {

    content: normal;

  }

  .circuit_bg_area:after {

    content: normal;

  }

}

/* モーダル 法規法令対応

--------------------------------------------------------------- */

/*モーダルを開くボタン*/

.modal-open {

  display: -webkit-inline-box;

  display: -ms-inline-flexbox;

  display: inline-flex;

  font-weight: bold;

  color: #fff;

  background: #000;

  padding: 1.5rem 2rem;

  cursor: pointer;

}



/*モーダル本体の指定 + モーダル外側の背景の指定*/

.modal-container {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  text-align: center;

  background: rgba(0, 0, 0, 0.5);

  padding: 40px 20px;

  overflow: auto;

  opacity: 0;

  visibility: hidden;

  -webkit-transition: 0.3s;

  transition: 0.3s;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  z-index: 999;

}



/*モーダル本体の擬似要素の指定*/

.modal-container:before {

  content: "";

  display: inline-block;

  vertical-align: middle;

  height: 100%;

}



/*モーダル本体に「active」クラス付与した時のスタイル*/

.modal-container.active {

  opacity: 1;

  visibility: visible;

}



/*モーダル枠の指定*/

.modal-body {

  position: relative;

  display: inline-block;

  vertical-align: middle;

  max-width: 800px;

  width: 90%;

}



/*モーダルを閉じるボタンの指定*/

.modal-close {

  position: absolute;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  top: -40px;

  right: -40px;

  width: 40px;

  height: 40px;

  font-size: 40px;

  color: #fff;

  cursor: pointer;

}



/*モーダル内のコンテンツの指定*/

.modal-content {

  background: #fff;

  text-align: left;

  padding: 30px;

}