@charset "UTF-8";

/*====================
スマホを基本設計にする
 - 〜640px：SP縦（共通）
 - 480px〜767px：スマートフォン横
 - 768px〜1279px：タブレット
 - 1280px〜：大型PC
====================*/


/* ==================～640px：SP縦（共通）=================
============================================================ */


html {
  font-size: 62.5%;
  line-break: strict;
  width: 100%;
  height: 100%;
}

body {
  background: #FFFFFF;
  color: #1f1f1f;
  font-family: YakuHanJP, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", Roboto, Verdana, Meiryo, sans-serif;
  font-size: 1.6rem;
  font-weight: normal;
  letter-spacing: 0.1em;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  display: none;
}

b, strong, .bold{
	font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI semibold", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic", "Segoe UI", Verdana, Meiryo, sans-serif;
}

/* IEだけに適応 */
_:lang(x)::-ms-backdrop, .selector {
	font-family: "Segoe UI", Meiryo, sans-serif;
}

a{
  color:inherit;
  text-decoration-skip-ink: none;
  -webkit-transition: color .16s ease;
  transition: color .16s ease;
}

a:hover {
  cursor: pointer;
  color: #f87582;
  text-decoration: none;
  transition: all .4s cubic-bezier(.165,.84,.44,1);
}

img {
  transition: 0.3s ease-in-out;
  max-width: 100%;
  height: auto;
}

h2 {
  font-family: YakuHanMP_Noto, 'Libre Baskerville', "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #f87582;
}

h3 {
  font-weight: bold;
  letter-spacing: 0.04em;
  line-height: 1.75;
  font-size: 1.7rem;
}

.pcBr {
  display: none;
}

/* fadeIn */
.fadeIn{
  animation: fadeInAnime 2s ease forwards;
  opacity:0;
  }

  @keyframes fadeInAnime{
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }

  @keyframes fuwafuwa_1 {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(0, -4%);
    }
    100% {
        transform: translate(0, 0);
    }
}

  
  /* fadeUp */
  
  .fadeUp{
  animation-name: fadeUpAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeUpAnime{
    from {
      opacity: 0;
    transform: translateY(30px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }

  .fadeUpTrigger2{
    opacity: 0;
  }

    /* fadeUp2 */
  
    .fadeUp2{
      animation-name: fadeUpAnime2;
      animation-duration:2s;
      animation-fill-mode:forwards;
      opacity:0;
      }
      
      @keyframes fadeUpAnime2{
        from {
          opacity: 0;
        transform: translateY(50px);
        }
      
        to {
          opacity: 1;
        transform: translateY(0);
        }
      }

      
  /* fadeDown */

.fadeDown{
  animation-name: fadeDownAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeDownAnime{
    from {
      opacity: 0;
    transform: translateY(-30px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }

  .delay{
    animation-delay: 10s;
  }


  animation: fuwafuwa_1 .5s ease 0s infinite;

@keyframes fuwafuwa_1 {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(0, -4%);
    }
    100% {
        transform: translate(0, 0);
    }
}

/*ナビゲーション*/

.chocolat_logo img {
  width: 100%;
  height: 36px;
}

.chocolat_logo a{
  display: block;
  height: 100%;
  padding: 17px 15px;
}

.chocolat_btn02{
  width: max-content;
  padding-left: 20px;
  position: absolute;
  right: 75px;
}

.header {
  display: flex;
  align-items: center;
  text-align: center;
  height: 70px;
  justify-content: space-between;
  width: 100%;
  position: fixed;
  z-index: 300;
  background: #fff;
}

#nav_toggle {
  position: fixed;
  width: 70px;
  height: 70px;
  z-index: 100;
  right: 0;
}

#nav_toggle > div {
  position: relative;
  width: 70px;
  height: 70px;
}

#nav_toggle span {
  width: 30px;
  height: 1px;
  left: 20px;
  display: block;
  background: #1f1f1f;
  position: absolute;
  -webkit-transition: .4s ease-in-out;
  -moz-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}

#nav_toggle span:nth-child(1) {
  top: 26px;
}

#nav_toggle span:nth-child(2) {
  top: 34px;
}

#nav_toggle span:nth-child(3) {
  top: 42px;
}

#nav_bg {
  right: -320px;
  width: 320px;
  padding: 70px 30px 30px;
  z-index: 300;
  position: fixed;
  top: 0;
  height: 100%;
  background-image: url(../img/toggle_bg.png);
  background-color: #fff;
	background-position: right 15% top 52%;
	background-size: 50% auto;
	background-repeat: no-repeat;
  font-size: 1.6rem;
  text-align: left;
  overflow: scroll;
}

.open #nav_bg {
  -webkit-transform: translate3d(-320px,0,0);
  transform: translate3d(-320px,0,0);
}

.open #nav_toggle span:nth-child(1) {
  top: 34px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

.open #nav_toggle span:nth-child(2) {
  width: 0;
  left: 50%;
}

.open #nav_toggle span:nth-child(3) {
  top: 34px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.nav_wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: 0.4s ease-in-out;
  background: rgba(0,0,0,0.0);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  pointer-events: none;
}

.overlay_on{
  background: rgba(0,0,0,0.4);
  pointer-events: auto;
}

#global_nav a {
  font-family: 'Libre Baskerville', 'Noto Serif JP', serif;
}

#global_nav a {
  text-decoration: none;
  display: block;
  padding: 15px 0;
  padding: 18px 0;
}

.btn a {
  background: #f87582;
  padding: 1rem 1.5rem;
  font-size: 1.2rem;
  display: inline-block;
  width: 100%;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  line-height: 1.4;
  color: #fff;
  border-radius: 19px;
}

.chocolat_btn01 {
  margin-top:90px;
}

.chocolat_btn01 .btn a {
  padding: 1.8rem 1rem;
  font-size: 1.6rem;
  line-height: 1.6;
}

.main_menu > li{
  border-top: 1px solid #eee;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.main_menu > li > .head01 {
  padding: 22px 0 0 0;
}

.main_menu > li .sub_menu_nav {
  padding: 0px 0 15px 5px;
}

.main_menu > li .sub_menu_nav > li {
  font-size: 14px;
  letter-spacing: 0.1em;
}

.main_menu{
  border-bottom: 1px solid #eee;
}

.top_kv {
  width: 100%;
  height: 0;
  padding-top: 160%;
  position: relative;
  overflow: hidden;
  background-image: url(../img/main_bg_r.png), url(../img/main_bg_l.png);
  background-color: #fff;
  background-position: left -11% bottom 23%, right -5% bottom 28%;
  background-size: 22% auto, 17% auto;
  background-repeat: no-repeat;
}

.top_kv_p {
  position: absolute;
}


.top_kv_1 {
  width: 45%;
  height: auto;
  top: 0;
  right: 5%;
}

.top_kv_2 {
  width: 40%;
  height: auto;
  top: 1%;
  left: 5%;
}

.top_kv_3 {
  width: 45%;
  height: auto;
  top: 18%;
  left: -15%;
}

.top_kv_4 {
  width: 25%;
  height: auto;
  top: 8%;
  right: 2%;
}

.top_kv_5 {
  width: 24%;
  height: auto;
  top: 19%;
  right: 21%;
}

.top_kv_6 {
  width: 25%;
  height: auto;
  top: 32%;
  left: 2%;
}

.top_kv_7 {
  width: 26%;
  height: auto;
  top: 17%;
  left: 25%;
}

.top_kv_8 {
  width: 25%;
  height: auto;
  top: 30%;
  right: 3%;
}

.top_kv_9 {
  width: 100%;
  height: auto;
  top: 33%;
  right: 0;
  left: 0;
  padding: 0 10%;
}

.crown {
  padding: 7% 25% 0;
}

.logo_plus {
  padding: 9% 9% 7%;
}

.top_kv_lead{
  text-align: center;
  color: #f87582;
  font-family: YakuHanMP_Noto, 'Libre Baskerville', "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  font-size: 1.4rem;
  line-height: 1.5;
}

.Btn a {
  display: block;
  background-color: #f87582;
  border-radius: 24px;
  padding: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: bold;
  color: #fff;
  text-align: center;
}

.Btn a:hover {
  opacity: 0.8;
}

.main {
  padding-top: 70px;
}

.top {
  max-width: 2000px;
  margin-right: auto;
  margin-left: auto;
}
.layout{
  padding-top: 40px;
}

.com_layout1{
  padding: 0 15px;
}

.lay_title{
  font-size: 2.8rem;
  text-align: center;
  margin-bottom: 25px;
}

.p_layout1{
  margin-bottom: 20px;
}

.list_layout1{
  margin-top: 40px;
  background-image: url(../img/layout1_bg_l.png), url(../img/layout1_bg_r.png);
  background-position: left 0 top 0, right 0 top 0;
  background-size: 20% auto, 20% auto;
  background-repeat: repeat-y;
  padding-bottom: 20px;
}

.list_layout1 p img{
  max-width: 205px;
}

.list_layout1 p{
  text-align: center;
  margin-bottom: 15px;
}

.com2_layout1{
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.v_layout1 {
  text-align: center;
  background-image: url(../img/layout1_bg_l.png), url(../img/layout1_bg_r.png);
  background-position: left 1% bottom 0%, right -5% bottom 0%;
  background-size: 10% auto, 20% auto;
  background-repeat: no-repeat;
  padding-bottom: 100px;
}

.v_layout1 img{
  max-width: 300px;
}

.layout2 {
  background-color: #fff8f9;
}

.layout2_inner{
  background-image: url(../img/point_bg.png), url(../img/point_bg.png), url(../img/point_bg.png), url(../img/point_bg.png);
  background-position: right -20% top 4%, left -20% top 29%, right -20% top 50%, left -20% bottom 1%;
  background-size: 50% auto, 50% auto, 50% auto, 50% auto;
  background-repeat: no-repeat;
}
.point_wrapper{
  margin-top: -70px;
  padding-left: 15px;
  padding-right: 15px;
}

h2.point_title{
  text-align: center;
  font-size: 2.8rem;
  margin-bottom: 25px;
  margin-top: -40px;
}

.point_title span {
  display: block;
  text-align: center;
  margin-bottom: 10px;
}

.point_title span img{
  max-width: 480px;
  width: 80%;
}

.point_box{
  padding-bottom: 60px;
}

.photo_box{
  position: relative;
}

.photo_box img.point_vs{
  border-radius: 10px;
  position: relative;
  width: 100%;
}

.photo_box .circle {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  bottom: -30px;
  right: 10px;
  width: 70%;
}

.circle p{
  width: 80px;
}

.point_no {
  border-bottom: solid 1px #f87582;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-bottom: 5px;
}

.point_no img{
  width: 200px;
}

.point_item h3{
  margin-bottom: 10px;
}

.p_layout3{
  text-align: center;
  margin-bottom: 30px;
}

.interview_wrapper {
  margin-top: 40px;
  background-image: url(../img/layout1_bg_l.png), url(../img/layout1_bg_r.png), url(../img/layout1_bg_l.png), url(../img/layout1_bg_r.png), url(../img/layout1_bg_l.png), url(../img/layout1_bg_r.png), url(../img/layout1_bg_l.png), url(../img/layout1_bg_r.png);
  background-position: left -15px top 300px, right -20px top 260px, right -30px top 600px, left -30px top 650px, left -15px top 1100px, right -30px top 1100px, right 0 top 1470px, left -10px top 1460px;
  background-size: 10% auto, 15% auto, 15% auto, 15% auto, 10% auto, 15% auto, 15% auto, 20% auto;
  background-repeat: no-repeat;
  padding-bottom: 20px;
}

.staff_vs_box {
  position: relative;
}

.staff_vs {
  position: relative;
  background-image: url(../img/interview_vs_bg.png);
  background-position: left 7px top 3px;
  background-size: 98% auto;
  background-repeat: no-repeat;
  padding: 0 15px 20px 10px;
}

.staff_vs img{
  border-radius: 10px;
}

.staff_name_box {
  border: solid 1px #fbbac0;
  padding: 10px 15px 15px;
  width: max-content;
  background: rgba(255,255,255,1);
  border-radius: 10px;
  position: absolute;
  bottom: -108px;
  left: 20px;
}

.label{
  margin-top: -30px;
  margin-bottom: 15px;
  transform:rotate(-5deg); 
}

.label img {
  width: 130px;
}

p.staff_com {
  font-weight: bold;
  color: #f87582;
  line-height: 1.6;
  margin-bottom: 15px;
  font-size: 1.7rem;
}

.staff_name{
  display: flex;
  align-items: flex-end;
}

.staff_name p{
  font-size: 1.4rem;
  line-height: 1.5;
}

.staff_name .name span{
display: block;
}

.staff_name .name {
  padding-right: 10px;
  border-right: solid 1px #1f1f1f;
  margin-right: 10px;
}

.staff_QA_box {
  margin-top: 150px;
  padding: 0 40px;
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.staff_QA_item h3 {
  padding-top: 18px;
  padding-bottom: 18px;
  padding-left: 60px;
  background-image: url(../img/interview_Q.png), url(../img/interview_border.png);
  background-position: left center, left bottom;
  background-size: 50px 50px, auto 5px;
  background-repeat: no-repeat, repeat-x;
  margin-bottom: 15px;
}

.staff_QA_item {
  margin-bottom: 30px;
}

.staff_img img{
  border-radius: 10px;
}

.layout4{
  background-color: #fff8f9;
}

.job{
  padding: 0 15px 40px;
  position: relative;
}

.data tr {
  border-bottom: 1px dotted #d0dbdb;
  display: flex;
  flex-direction: column;
  padding: 20px 0 5px;
}

.data tr:last-of-type {
  border-bottom: none;
}

.data th {
  margin-bottom: 5px;
  color: #f87582;
  padding: 0 10px;
}

.data td{
  margin-bottom: 15px;
  padding: 0 10px;
}

.data td div{
  margin-bottom: 15px;
}

.data td div:last-of-type{
  margin-bottom: 0;
}

.job_box {
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  position: relative;
  max-width: 600px;
  margin-right: auto;
  margin-left: auto;
}

.data table {
  width: 100%;
}

.catch_box {
  position: absolute;
  top: 0;
  right: 6em;
}

.catch {
  color: #f87582;
  font-weight: bold;
  text-align: center;
  line-height: 1.4;
  position: relative;
  display: inline-block;
  padding: 0 12px;
  left: 55%;
  transform: rotate(10deg);
  margin-top: -5px;
}

.catch::before {
  position: absolute;
  top: 0.1rem;
  height: 4.5rem;
  content: '';
  border-left: solid 1px;
  left: 0;
  transform: rotate(-20deg);
}

.catch::after {
  border-right: solid 1px;
  right: 0;
  transform: rotate(20deg);
  position: absolute;
  top: 0.1rem;
  height: 4.5rem;
  content: '';
}

.dot{
  color: #fbbac0;
}

.company tr:first-of-type  {
  border-top: 1px dotted #d0dbdb;
}

.company tr:last-of-type {
  border-bottom: 1px dotted #d0dbdb;
}

.company_outline {
  padding-top: 100px;

}

.owner_wrapper {
  padding: 0 40px 30px;
  background-image: url(../img/layout1_bg_l.png), url(../img/layout1_bg_r.png), url(../img/layout1_bg_l.png), url(../img/layout1_bg_r.png), url(../img/layout1_bg_l.png), url(../img/layout1_bg_r.png), url(../img/layout1_bg_l.png), url(../img/layout1_bg_r.png);
  background-position: left -15px top 140px, right -20px top 140px, right -30px top 600px, left -30px top 600px, left -15px top 1100px, right -30px top 1100px, right 0 top 1600px, left -10px top 1600px;
  background-size: 10% auto, 15% auto, 15% auto, 15% auto, 10% auto, 15% auto, 15% auto, 20% auto;
  background-repeat: no-repeat;
}


/*
.owner_wrapper {
  padding: 0 40px 30px;
  background-image: url(../img/layout1_bg_l.png), url(../img/layout1_bg_r.png), url(../img/layout1_bg_l.png), url(../img/layout1_bg_r.png), url(../img/layout1_bg_l.png), url(../img/layout1_bg_r.png), url(../img/layout1_bg_l.png), url(../img/layout1_bg_r.png), url(../img/layout1_bg_l.png), url(../img/layout1_bg_r.png), url(../img/main_bg_r.png), url(../img/main_bg_l.png);
  background-position: left -15px top 140px, right -20px top 110px, right -30px top 500px, left -30px top 450px, left -15px top 800px, right -30px top 1100px, right 0 top 1470px, left -30px top 1200px, left -15px top 1800px, right -20px top 2000px, left -25px top 2300px, right -5px top 2300px;
  background-size: 10% auto, 15% auto, 15% auto, 15% auto, 10% auto, 15% auto, 15% auto, 20% auto, 15% auto, 15% auto, 20% auto, 15% auto;
  background-repeat: no-repeat;
}
*/

.owner_wrapper .lay_title{
  margin-bottom: 40px;
}

.message p{
  margin-bottom: 30px;
}

.message {
  margin-bottom: 60px;
  max-width: 420px;
  margin-right: auto;
  margin-left: auto;
}

.owner{
  max-width: 420px;
  margin-right: auto;
  margin-left: auto;
}

.owner_vs{
  text-align: center;
}

.owner_vs img{
  width:200px;
}

.owner_name {
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.owner_name span {
  font-size: 1.6rem;
  display: inline-block;
  margin-left: 1em;
}

.history{
  font-size: 1.4rem;
}

.his_1{
  margin-bottom: 40px;
}

.history dl{
  display: flex;
  font-size: 1.2rem;
}

.history dl dt {
  width: 10em;
  font-weight: normal;
}

.history dl dd {
  width: calc(100% - 10em);
  margin-bottom: 5px;
}

.message {
  margin-bottom: 100px;
  max-width: 1200px;
  text-align: center;
  line-height: 1.8;
}

.message p {
  margin-bottom: 50px;
}

.footer_rightcontainer {
  background-color: #fef1f2;
  padding: 30px 0 25px;
}

.footer_rightcontainer p{
  text-align: center;
}

.footer_rightcontainer .chocolat_logo img {
  width: 100%;
  height: 50px;
}

p.chocolat_logo_footer {
  margin-bottom: 15px;
}

p.chocolat_logo_footer img {
  width: 200px;
}

p.chocolat_logo_footer a {
  display: block;
}

.scrolldown2{
  display: none;
}

/*-----------------スマホ設定ここまで640px以下------------------------------------------------
---------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------*/


/*-----------------タブレット設定ここから　768px以上　-----------------*/

/*768px以上*/
@media only screen and (min-width:768px){

.spBr {
  display: none;
}

.top_kv_2 {
  left: 12%;
  width: 37%;
}

.top_kv_3 {
  width: 32%;
  height: auto;
  top: 20%;
  left: 1%;
}

.top_kv_4 {
  width: 20%;
  height: auto;
  top: 12%;
  right: 7%;
}

.top_kv_5 {
  width: 18%;
  height: auto;
  top: 22%;
  right: 29%;
}

.top_kv_6 {
  width: 16%;
  height: auto;
  top: 32%;
  left: 13%;
}

.top_kv_7 {
  width: 18%;
  height: auto;
  top: 18%;
  left: 33%;
}

.top_kv_8 {
  width: 16%;
  height: auto;
  top: 30%;
  right: 14%;
}

.crown {
  padding: 3% 25% 0;
}

.logo_plus {
  padding: 9% 10% 7%;
}

.top_kv_lead {
  font-size: 2rem;
}

.top_kv_9 {
  top: 38%;
  padding: 0 20%;
}

.Btn a {
  margin-top: 30px;
  font-size: 2rem;
  padding: 15px;
  border-radius: 33px;
}

.top_kv {
  padding-top: 124%;
}

.layout {
  padding-top: 55px;
}

.com_layout1 {
  padding: 0 60px;
}

.list_layout1 {
  padding: 5px 20px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 0px;
  margin-bottom: 20px;
  background : none;
}

.list_layout1 p{
  width: 24%;
}

.v_layout1 {
  background : none;
}

.call {
  background-image: url(../img/layout1_bg2_l.png), url(../img/layout1_bg2_r.png);
  background-position: left 5% bottom 0%, right 11% bottom 16%;
  background-size: 23% auto, 18% auto;
  background-repeat: no-repeat;
  padding-bottom: 20px;
}

.point_wrapper {
  margin-top: -90px;
  padding-right: 60px;
  padding-left: 60px;
}

.layout2{
margin-top: 40px;
}

.point_title span {
  margin-bottom: 15px;
}

.point_title span img {
  width: 60%;
}

h2.point_title {
  margin-bottom: 40px;
}

.staff_vs {
  background-position: left 55px top 2px;
  background-size: 90% auto;
  padding: 0 60px 40px 60px;
}

.staff_name_box {
  bottom: 80px;
  left: 30px;
}

.staff_name .name {
  font-size: 1.6rem;
}

.staff_name p {
  font-size: 1.2rem;
}

.staff_name .name span {
  font-size: 1.2rem;
}

.staff_QA_box {
  margin-top: 40px;
  padding: 0;
  max-width: 450px;
}

.staff_img {
  transform: rotate(5deg);
  text-align: center;
  margin-top: 50px;
}

.staff_img img {
  width: 60%;
}

.staff_QA_item h3:before {
  top: 0;
}

.interview_wrapper {
  margin-top: 40px;
  background-image: url(../img/layout1_bg_l.png), url(../img/layout1_bg_r.png), url(../img/layout1_bg_l.png), url(../img/layout1_bg_r.png), url(../img/layout1_bg_l.png), url(../img/layout1_bg_r.png), url(../img/layout1_bg2_l.png), url(../img/layout1_bg2_r.png);
  background-position: left 0px top 50px, right -20px top 50px, right 20px top 450px, left 10px top 430px, left 20px top 880px, right -30px top 1000px, right 50px top 1300px, left 30px top 1300px;
  background-size: 5% auto, 8% auto, 8% auto, 10% auto, 7% auto, 10% auto, 20% auto, 15% auto;
  background-repeat: no-repeat;
  padding-bottom: 20px;
  max-width: 2000px;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}

.job_box {
  margin-top: -10px;
}

.catch {
  left: 70%;
  margin-top: -50px;
}

.data tr {
  flex-direction: row;
}

.data th {
  width: 8em;
}

.owner_wrapper {
  padding: 0 150px 80px;
  background-image: url(../img/layout1_bg_l.png), url(../img/layout1_bg_r.png), url(../img/layout1_bg_l.png), url(../img/layout1_bg_r.png), url(../img/layout1_bg_l.png), url(../img/layout1_bg_r.png);
  background-position: left -15px top 140px, right -20px top, right -30px top 600px, left -30px top 800px, left -15px top 1300px, right -30px top 1350px;
  background-size: 10% auto, 15% auto, 10% auto, 10% auto, 10% auto, 15% auto;
  background-repeat: no-repeat;
}

.layout6 {
  padding-left: 60px;
  padding-right: 60px;
}

}/*-----------------これは消さないように-----------------*/


/*-----------------タブレット設定ここまで1024px以下------------------------------------------------
---------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------*/


/*-----------------デスクトップ設定ここから　1025px以上　-----------------*/
/*1025px以上*/
@media only screen and (min-width:1025px){

.pcBr {
  display: block;
}
  
#overlay{
  display: none;
}

#nav_toggle {
  display: none;
}

.main {
  padding-top: 96px;
}

.scrolldown2{
  display: block;
  position: absolute;
  top: 99%;
  left: 50%;
  z-index: 2;
  animation-delay:2s;
}

.scrolldown2 span {
  position: absolute;
  left: 10px;
  bottom: 10px;
  color: #1f1f1f;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

.scrolldown2:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f87582;
  animation: circlemove 1.6s ease-in-out infinite, cirlemovehide 1.6s ease-out infinite;
  z-index: 1;
}

.scrolldown2:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2px;
  height: 50px;
  background: #f0f0f0;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
  0%{bottom:45px;}
 100%{bottom:-5px;}
}

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
  0%{opacity:0}
 50%{opacity:1;}
80%{opacity:0.9;}
100%{opacity:0;}
}

.chocolat_logo {
  margin-right: 0;
  margin-bottom: 0;
  max-width: 200px;
  z-index: 200;
  position: fixed;
  width: 100%;
}

.chocolat_logo a {
  padding: 0;
  display: flex;
  align-items: center;
  height: 96px;
}

.chocolat_wrapper_all {
  position: relative;
  margin: 0 auto;
}

.header {
  padding-left: 2.5%;
  height: 96px;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  z-index: 1200;
}

.nav_wrapper {
  position: static;
  width: calc(100% - 200px);
  pointer-events: auto;
}

#nav_bg {
  right: 0;
  width: calc(100% - 200px);
  padding: 0;
  z-index: 1;
  position: fixed;
  top: 0;
  height: 96px;
  background-image: none;
  background-color: #fff;
  text-align: center;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.global_nav{
  display: flex;
}

.main_menu {
  display: flex;
  border-bottom: none;
}

.chocolat_btn01 {
  margin-top: 0px;
}

.chocolat_btn01 .btn a {
  padding: 0 30px;
  font-size: 1.5rem;
  line-height: 96px;
  height: 96px;
  border-radius: 0;
  transition: all .4s cubic-bezier(.165,.84,.44,1);
}

.chocolat_btn01 .btn a:hover {
  opacity: 0.8;
}

.chocolat_logo img {
  width: 100%;
  height: 50px;
}

#global_nav > ul > li {
  position: relative;
  font-size: 1.5rem;
}


#global_nav a {
  text-decoration: none;
  display: block;
  padding: 0 15px;
  transition: all .4s cubic-bezier(.165,.84,.44,1);
  transition-property: color;
  transition-timing-function: cubic-bezier(.165,.84,.44,1);
  display: block;
}

.main_menu > li {
  border-top: none;
}

.top_kv_9 {
  top: 15%;
  padding: 0 30%;
}

.top_kv_1 {
  width: 35%;
  height: auto;
  top: 0;
  right: 0;
}

.top_kv_2 {
  left: 7%;
  width: 30%;
}

.top_kv_3 {
  width: 23%;
  height: auto;
  top: 55%;
  left: 0;
}

.top_kv_4 {
  width: 15%;
  height: auto;
  top: 20%;
  right: 0;
}

.top_kv_5 {
  width: 12%;
  height: auto;
  top: 48%;
  right: 4%;
}

.top_kv_6 {
  width: 10%;
  height: auto;
  top: 64%;
  left: 20%;
}

.top_kv_8 {
  width: 11%;
  height: auto;
  top: 63%;
  right: 15%;
}

.top_kv_7 {
  width: 13%;
  height: auto;
  top: 34%;
  left: 10.5%;
}

.top_kv {
  padding-top: 68%;
  background-image: url(../img/main_bg_pc_01.png), url(../img/main_bg_pc_02.png), url(../img/main_bg_pc_03.png), url(../img/main_bg_pc_04.png);
  background-color: #fff;
  background-position: right 0% top 100%, right 25% top 60%, left 26% top 50%, left 0% top 25%;
  background-size: 20% auto, 3% auto, 5% auto, 10% auto;
  background-repeat: no-repeat;
}

.lay_title {
  font-size: 3.6rem;
}

.layout1{
  max-width: 2000px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 100px;
}

.p_layout1 {
  text-align: center;
}

.list_layout1 {
  padding: 0;
  width: 900px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 50px;
  margin-bottom: 50px;
}

.com2_layout1 {
  line-height: 2;
  letter-spacing: 0.1em;
  margin-bottom: 40px;
  font-size: 2.5rem;
}

.com_layout1 {
  background-image: url(../img/layout1_06.png), url(../img/layout1_07.png);
  background-color: transparent;
  background-position: left 0% top 35%, right 5% top 25%;
  background-size: 16% auto, 16% auto;
  background-repeat: no-repeat;
}

.layout2_inner {
  max-width: 1700px;
  margin-right: auto;
  margin-left: auto;
  background-image: url(../img/point_bg.png), url(../img/point_bg.png), url(../img/point_bg.png), url(../img/point_bg.png), url(../img/point_bg.png);
  background-position: right 0 top 4%, left 0% top 29%, right 0 top 50%, left 0 bottom 10%,right 2% bottom -5%;
  background-size: 400px auto, 350px auto, 370px auto, 450px auto, 370px auto;
  background-repeat: no-repeat;
}

.point_wrapper {
  max-width: 1076px;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  padding: 0;
  padding-bottom: 50px;
}

.point_box{
  display: flex;
  margin-bottom: 40px;
}

.point_box:last-of-type{
  margin-bottom: 0;
}

.point_box:nth-child(odd) {
  flex-direction:row-reverse;
}

.point_item:first-child{
  width: 50%;
  margin-right: 3%;
}

.point_box:nth-child(odd) .point_item:first-child{
  width: 50%;
  margin-right: 0;
  margin-left: 3%;
}

.point_item:nth-child(2){
  width: 47%;
}

.point_no{
  margin-top: 0;
}

.point_no img {
  width: 250px;
}

h2.point_title {
  margin-bottom: 70px;
  font-size: 3.4rem;
}

.point_item h3 {
  margin-bottom: 10px;
  font-size: 2.4rem;
}

.circle p {
  width: 100px;
}

.layout3, .layout4, .layout5{
  padding-top: 100px;
}

.staff_vs_box {
  width: 900px;
  margin-right: auto;
  margin-left: auto;
}

.staff_name_box {
padding: 15px 45px 30px;
}

.label {
  margin-bottom: 20px;
  transform: rotate(-5deg);
  margin-left: 60px;
}

.job_box {
  max-width: 1000px;
  padding: 40px 120px;
  margin-bottom: 50px;
  margin-top: 50px;
  font-size: 1.8rem;
}

.catch_box {
  position: absolute;
  top: 0;
  right: 10em;
}

.catch {
  font-size: 2rem;
  padding: 0 25px;
}

.catch::before {
  height: 6rem;
}

.catch::after {
  height: 6rem;
}

.company_outline {
  width: 700px;
  margin-right: auto;
  margin-left: auto;
}

.owner_wrapper .lay_title,
.job .lay_title {
  margin-bottom: 70px;
  margin-bottom: 70px;
}

.message p {
  margin-bottom: 50px;
  font-size: 1.8rem;
}

.staff_QA_box {
  max-width: 1076px;
  position: relative;
  width: 100%;
}

.staff_img{
  position: absolute;
  top: -50px;
  right: 15px;
  width: 40%;
}
.staff_img img {
  width: 100%;
}

.staff_QA_item{
  width: 45%;
  margin-bottom: 30px;
}

.staff_QA_item02 {
  margin-right: auto;
  margin-left: 5%;
}

.staff_QA_item04{
  margin-right:0;
  margin-left: auto;
}

.staff_QA_item04 {
  margin-top: -180px;
  margin-right: 0;
  margin-left: auto;
}

.owner_vs img {
  width: 250px;
}

.history {
  font-size: 1.6rem;
}

.owner_name {
  font-size: 2.8rem;
  margin-bottom: 20px;
}

.history dl {
  font-size: 1.4rem;
}

}/*-----------------これは消さないように-----------------*/


/*-----------------デスクトップ設定ここまで---------------------------------------------------
---------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------*/


/* 1400px〜：大型PC
------------------------------ */
@media screen and (min-width:1400px) {

#global_nav > ul > li {
  position: relative;
  font-size: 1.6rem;
}

.top_kv {
  padding-top: 940px;
  background-image: url(../img/main_bg_pc_01_01.png), url(../img/main_bg_pc_02.png), url(../img/main_bg_pc_03.png), url(../img/main_bg_pc_04.png);
  background-position: right 0% bottom 0, right 25% top 60%, left 28% top 58%, left 0% top 28%;
  background-size: 380px auto, 3% auto, 5% auto, 10% auto;
}

.top_kv_1 {
  width: 37%;
}

.top_kv_3 {
  top: 55%;
  left: 5%;
}

.top_kv_4 {
  max-width: 210px;
  right: 3%;
  top: 30%;
}

.top_kv_5{
  max-width: 180px;
  right: 11%;
  top:56%;
}

.top_kv_6 {
  max-width: 140px;
  top: 70%;
  left: 24%;
}

.top_kv_7 {
  max-width: 180px;
  top: 36%;
  left: 10%;
}

.top_kv_8{
  max-width: 170px;
  right: 22%;
  top: 67%;
}

.top_kv_9 {
  top: 15%;
  padding: 0;
  width: 600px;
  margin-right: auto;
  margin-left: auto;
}

.chocolat_btn01 .btn a {
  padding: 0 70px;
  font-size: 1.8rem;
}

.chocolat_btn01 {
  padding: 0 0 0 50px;
}

p.Btn {
  width: 460px;
  margin-right: auto;
  margin-left: auto;
}

.Btn a {
  margin-top: 50px;
  font-size: 2.8rem;
  border-radius: 40px;
}

#global_nav a {
  padding-left: 50px;
}

.header {
  padding-left: 5%;
}

.com_layout1 {
  background-position: left 8% top 30%, right 15% top 20%;
  background-size: 17% auto, 18% auto;
}

.call {
  background-position: left 20% bottom 0%, right 25% bottom 16%;
  background-size: 18% auto, 13% auto;
}

.staff_vs_box {
  width: 1200px;
  margin-right: auto;
  margin-left: auto;
}

.staff_vs {
  background-position: left 40px top 2px;
  background-size: 90% auto;
  padding: 0 120px 40px 65px;
}

p.staff_com {
  margin-bottom: 30px;
  font-size: 2.6rem;
}

.label {
  margin-bottom: 30px;
  margin-left: 110px;
}

.label img {
  width: 150px;
}

.staff_name_box {
  bottom: 80px;
  left: 0;
}

.staff_QA_item h3 {
  font-size: 1.8rem;
}

.interview_wrapper {
  background-image: url(../img/layout1_bg_l.png), url(../img/layout1_bg_r.png), url(../img/layout1_bg_l.png), url(../img/layout1_bg_r.png), url(../img/layout1_bg_l.png), url(../img/layout1_bg_r.png), url(../img/layout1_bg2_l.png), url(../img/layout1_bg2_r.png);
  background-position: left 15% top 50px, right 15% top 50px, right 0 top 450px, left 10px top 430px, left 15% top 880px, right 2% top 1300px, right 8% top 700px, left 0% top 1100px;
  background-size: 5% auto, 8% auto, 8% auto, 8% auto, 7% auto, 10% auto, 13% auto, 15% auto;
}

.owner_wrapper {
  background-image: url(../img/layout1_bg_l.png), url(../img/layout1_bg_r.png), url(../img/layout1_bg_l.png), url(../img/layout1_bg_r.png), url(../img/layout1_bg_l.png), url(../img/layout1_bg_r.png), url(../img/layout1_bg2_l.png), url(../img/layout1_bg2_r.png);
  background-position: left 15% top 50px, right 15% top 50px, right 0 top 450px, left 10px top 430px, left 15% top 780px, right 12% top 1300px, right 20% top 800px, left 0% top 1500px;
  background-size: 5% auto, 8% auto, 7% auto, 8% auto, 6% auto, 8% auto, 10% auto, 8% auto;
}

}/*-----------------これは消さないように-----------------*/