/*//////// variable ///////////*/
:root {
    --bg-color: #F2F2F2;      /*     var(--bg-color);         */
    --bg-color-lighter: #fbfbfb;        /*     var(--bg-color-lighter);         */

    --main-color:#666666;      /*     var(--main-color);         */
    --main-color-lighter:#98989895;      /*     var(--main-color-lighter);         */
    --main-color-lighter2:#005aae12;;      /*     var(--main-color-lighter2);         */

    --accent-color:  #1a2872;   /*     var(--accent-color);     */
    --accent-color-trans: #002b5494;        /*     var(--accent-color-trans);     */

    --accent-sub-color: #e2991d   ;  /*    var(--accent-sub-color);      */
    
    --color-white:  #fff;           /*     var(--color-white);      */
    --color-white-trans:  rgba(255, 255, 255, 0.85);           /*     var(--color-white-trans);      */
    --link-color:  #002c54;            /*     var(--link-color);     */

    --text-color: #222831;            /*     var(--text-color);       */
    --text-invert-color: #fff;        /*     var(--text-invert-color);     */

    --section-margin-pc: 120px auto;     /*     var(--section-margin-pc);     */
    --section-margin-sp: 40px auto;       /*     var(--section-margin-sp);     */
  }










/*//////// General ///////////*/

html {
    font-size: 58.5%;
    scroll-behavior: smooth;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    scroll-padding-top: 150px; 
  }
  
body {
    font-size: 1.6rem;
    line-height: 2.6rem;
    letter-spacing: 0.01rem;
    width: 100vw;
    scroll-behavior: smooth;
    font-family: 'Lato', 'BIZ UDGothic', sans-serif;
    font-feature-settings: 'palt' 1;
    scroll-behavior: smooth;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

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

h1,h2,h3,h4,h5,p,a,span, label, small, li{
  color: rgb(60, 60, 60);
  color: #2f2f28;
  /* color: #353c3f; */
}

@media screen and (max-width: 767px) {
    body {
      font-size: 1.4rem;
    }
    html {
        scroll-padding-top: 50px; 
      }
}

@media(min-width: 768px){
    a[href^="tel:"]{
      pointer-events: none;
    }
  }



/*//////// header.php ///////////*/
header{
    width: 100vw;
    margin: 0 auto;
    position: fixed;
    top: 0;
    background-color: rgb(255, 255, 255);
    z-index: 100;
}
.header_wr{
    width: 100%;
    margin: auto;
    max-width: 1200px;
    z-index: 100;
}
.sp{
    display: none;
}
@media screen and (max-width: 767px) {
    .pc {
      display: none;
    }
    .sp{
      display: block;
    }
}

/*-- header_top...starts here --*/
.header_top{
    width: 91%;
    margin: 5px auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}
.logo_wr{
    width: 30%;
    text-align: left;
    margin: 0 auto;
    margin-bottom: -2px;
}
.logo_wr img{
    width: 68%;
}
.top_btn_wr{
    align-items: center;
    width: 43%;
}
.top_btn_wr ul{
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 2%;
}
.top_btn_wr ul li{
    width: 40%;
    margin-top: -5px;
    padding:10px 15px;
    text-align: center;
    transition: .3s;
    color: white;
    border-radius: 3px;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 1px 1px 0px rgba(125, 125, 125, 0.2);
}
.top_btn_wr ul li a{
    color: white;
}
.top_btn_wr ul li:hover{
    opacity: .7;
}

.tel_wr{
    text-align: center;
    width: 22%;
    min-width: 180px;
    margin-right: -10px;
}
.tw_01{
    padding: 0;
    font-size: 0.6em;
    margin: 0 auto;
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header_top .tw_01::before, .header_top .tw_01::after{
    border-top: 1px solid;
    content: "";
    width: 5px;
}
.header_top .tw_01::before{
    margin-right: 3px;
}
.header_top .tw_01::after{
    margin-left: 3px;
}
.tw_02{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    justify-content: center;
    margin: -3px auto;
}
.tw_02 img{
    width: 13%;
    margin-right: 7px;
}
.tel_no{
    font-weight: bold;
    letter-spacing: 0.05rem;
}
.tw_03{
    font-size: 0.6em;
    letter-spacing: 0.05rem;
}
@media screen and (max-width: 1110px) {
    .logo_wr{
        width: 40%;
    }
    .top_btn_wr{
        width: 35%;
        font-size: 1.2rem;
    }
    .top_btn_wr ul{
        gap: 2%;
    }
    .top_btn_wr ul li{
        width: 48%;
        padding: 10px 0;
    }
    .tw_01{
        width: 100%;
    }
    .tw_02{
        margin: -6px auto;
    }
}

@media screen and (max-width: 767px) {
    .header_wr{
        width: 100vw;
    }
    .header_top{
        width: 100%;
        margin-left: auto;
        justify-content: flex-start;
        margin: 0;
        padding: 0;
    }
    .logo_wr{
        width: 52%;
        min-width: 100px;
        margin: 2px 0 0;
    }
    .logo_wr img{
        width: 90%;
    }
    .sp_wr{
        width: 48%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: relative;
        margin: 0;
        padding: 0;
    }
    .sp_contact{
        background-color: black;
        width: 70px;
        height: 70px;
        cursor: pointer;
        z-index: 300;
        position: relative;
    }
    .sp_contact img{
        height: 10px;
        width: 30px;
        position: absolute;
        top: 15px;
        right: 90px;
    }
    .sp_contact p{
        font-size: 1rem;
        color: white;
        position: absolute;
        top: 38px;
        left: 8px;
    }

/* (ハンバーガーアイコン) */
.hamburger {
    width: 70px;
    height: 70px;
    cursor: pointer;
    z-index: 300;
    background: yellow;
  }
.hamburger p{
    font-size: 1rem;
    position: absolute;
    top: 38px;
    right: 15px;
    color: var(--text-invert-color);
  }
.hamburger__line {
    position: absolute;
    width: 30px;
    height: 2px;
    right: 20px;
    background-color: grey;
    transition: all 0.3s;
 }
.hamburger__line--1 {
    top: 18px;
}
.hamburger__line--2 {
    top: 25px;
}
.hamburger__line--3 {
    top: 32px;
}
  
/*ハンバーガーがクリックされたら*/
  .open .hamburger__line--1 {
    transform: rotate(-45deg);
    top: 19px;
  }
  
  .open .hamburger__line--2 {
    opacity: 0;
  }
  
  .open .hamburger__line--3 {
    transform: rotate(45deg);
    top: 19px;
  }
  
  /* sp-nav(ナビ) */
  .sp-nav {
    position: fixed;
    right: -100%; 
    top: 62px;
    width: 75%;
    height: 100vh;
    background-color: #fff;
    transition: all 0.3s;
    z-index: 500;
    overflow-y: auto;
    /* border-top: #000 1px solid; */
    margin: 0 auto;
  }
  .open .sp-nav {
    right: 0;
  }
  .sp-nav ul{
    width: 60%;
    margin: 20px auto;
}
  .sp-nav .sub-menu_sp{
    margin: 0px auto;
}
  .sp-nav ul li{
    padding: 10px 0;
    font-weight: bold;
    font-size: 1.6rem;
}
  .sp-nav ul li:nth-child(2) ul li{
    padding: 4px 0;
    font-weight: normal;
}
.sp-nav .tel_wr{
    width: 100%;
    background-color: lightgray;
    padding: 20px 0 5px;
}
.sp-nav .tw_01{
    font-size: 1.4rem;
}
.sp-nav .tw_02{
    margin: 10px auto;
    font-size: 2rem;
}
.sp-nav .tw_03{
    font-size: 1.4rem;
}
.sp-nav .contactform{
    width: 80%;
    color:   var(--accent-sub-color); 
    display: block;
    font-size: 1.8rem;
    text-align: center;
    padding: 15px 0;
    margin: 15px auto;
    border: solid 2px white;
    background-color: white;
}
.sp-nav .dl{
    width: 100%;
    background-color: #000;
    color: white;
    display: block;
    font-size: 1.8rem;
    text-align: center;
    padding: 20px 0;
    margin: 0 auto;
}
.sp-nav.is-active {
    right: 0%; 
  }

/* ハンバーガーメニュー解除用bg */
  .black-bg {
    position: fixed;
    left: 0;
    top: 62px;
    width: 100vw;
    height: 100vh;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
    cursor: pointer;
    z-index: 100;
    background-color: #000;
  }
  .open .black-bg {
    opacity: 0.5;
    visibility: visible;
  }
}
/*-- header_top...ends here --*/

/*-- menu...starts here --*/
.menu{
    display: flex;
    width: 90%;
    margin:10px auto 0;
    font-size: 1.4rem;
    font-weight: bold;
    padding: 5px 0 10px;
}
.menu > li{
    width: calc(75%/5);
}
.menu > li:first-child{
    width: 25%;
}

.menu li{
    position: relative;
}
.menu li a{
    width: 100%;
    display: block;
    text-align: center;
    position: relative;
}
.menu li a:hover{
    color: red;
} 
.menu li li{
    height: 0;
    overflow: hidden;
    transition: all .2s ease;
}
.menu li:hover > ul > li{
    height: 5rem;
    line-height: 5rem;
    background-color: white;
    overflow: visible;
    transform: translateY(10%);
    text-align: center;
}
.menu > li > ul:before{
    border: 4px solid transparent;
    border-top: 4px solid rgb(0, 0, 0);
    content: "";
    left: 80%;
    position: absolute;
    top: 32%;
    transform: translateY(20%);
}
.menu > li > ul > li a{
    text-align: left;
    width: 100%;
    margin: 0 auto;
    margin-left: 40px;
}
@media screen and (max-width: 1110px) {
    .menu{
        width: 95%;
        font-size: 1.2rem;
    }
}
@media screen and (max-width: 767px) {
    .menu {
      display: none;
    }
}
/*-- menu...ends here--*/



/*//////// index.php ///////////*/
main{
    width: 100vw;
}
h3{
    font-weight: bold;
    font-size: 2rem;
    margin-bottom: 20px;
    text-align: center;
    padding-top: 10px;
    color: #2d3033;
}
section{
    width: 92%;
    margin: 40px auto;
}

@media screen and (min-width: 768px) {
    section{
        width: 85%;
        max-width: 1200px;
        margin: 120px auto;
    }
    h3{
        font-size: 3rem;
        margin-bottom: 40px;
    }
}

/*-- herobox..starts here --*/
#herobox{
    width: auto;
    height: 500px;
    max-width: 1500px;
    background-image: url("https://www.corporatetest1.nandemo-dubbing.com/test/img/main.png");
    background-size: cover;
    background-repeat: none; 
    margin: 110px auto 0;
    position: relative;
}
.herobox_inner{
    position: absolute;
    top: 15%;
    right: 5%;
    text-align: left;
    padding: 20px 30px;
} 
.herobox_inner h3, 
.herobox_inner h2,
.herobox_inner p{
    display: block;
    color: white;
    font-weight: bold;
    text-align: left;
}
.herobox_inner h3{
    font-size: 1.8rem;
    text-shadow: none;
    margin-bottom: 10px;
    padding-bottom: 3px;
    display: inline-block;
}
.herobox_inner h3:after {
	content: "";
	display: block;
	height: 2px;
	background: linear-gradient(to right, rgb(207, 238, 253), white);
    animation: border_anim 1s linear forwards;
    animation-delay: 2s;
    opacity: 0;
}
@keyframes border_anim {
	0%{
		width: 0%;
        opacity: 0;
	}
	100%{
		width: 100%;
        opacity: 1;
	}
}
.herobox_inner h2{
    font-size: 3.8rem;
    line-height: 5.6rem;
    margin-top: 0;
    padding: 10px 0 40px;
    text-shadow: 1px 1px 0 var(--main-color-lighter2), -1px 1px 0 var(--main-color-lighter2), 1px -1px 0 var(--main-color-lighter2), -1px -1px 0 var(--main-color-lighter2);
}
.herobox_inner p{
    margin-bottom: 10px;
    letter-spacing: .1rem;
    font-size: 2rem;
    color:  var(--accent-color);
}
.herobox_inner ul{
    display: flex;
    width: 100%;
    gap: 2%;
    justify-content: flex-start;
}
.herobox_inner ul li{
    width: 40%;
}

/* animation */
.fade-in{ 
    opacity:0;
    animation-name:testanimation;
    animation-duration:3s; 
    animation-fill-mode: forwards;
    animation-iteration-count: initial;
  }
  @keyframes testanimation {
  0% {
   opacity: 0;
   transform: translateX(-20px);
  }
    100%{
      opacity: 1;
      transform: translateX(0px);
    }
  }
/* animation ends */


@media screen and (max-width: 897px) {
#herobox{
    height: 40vh;
  }
  .herobox_inner{
    top: 15%;
    right: 0%;
} 
  .herobox_inner h3{
    font-size: 1.4rem;
    margin-bottom: 15px;
    padding-bottom: 0px;
    line-height: 2rem;
}
.herobox_inner h2{
    font-size: 2.4rem;
    line-height: 3.2rem;
}
.herobox_inner p{
    margin-bottom: 0px;
    letter-spacing: 0rem;
    font-size: 1.4rem;
    line-height: 2.4rem;
    margin-top: 10px;
}
}
@media screen and (max-width: 767px) {
    #herobox{
        height: 30vh;
        margin: 70px auto 0;
        background-image: url("https://www.corporatetest1.nandemo-dubbing.com/test/img/main_sp.png");
  }
  .herobox_inner{
    top: 8%;
    right: 0%;
    padding: 10px;
} 
  .herobox_inner h3{
    font-size: 1rem;
    margin-bottom: 5px;
    padding-bottom: 0px;
    line-height: 1.6rem;
    overflow: hidden;
    position: relative;
}
  .herobox_inner h3 span {
    display: inline-block;
    margin-left: -100%;
    transition: 0.4s;
    transition-delay: 0.4s;
  }
  h3.slide_on::before {
    left: 0;
  }
  h3.slide_on span {
    margin-left: 0;
  }
.herobox_inner h2{
    font-size: 1.4rem;
    line-height: 2rem;
    margin-top: 0;
    padding: 0;
}
.herobox_inner p{
    margin-bottom: 0px;
    letter-spacing: 0rem;
    font-size: 1rem;
    line-height: 1.4rem;
    margin-top: 10px;
}
.herobox_inner ul{
    width: 85%;
    margin-left: auto;
}
.herobox_inner ul li{
    width: 65%;
    margin-top: 5px;
    padding: 0px;
}
.herobox_inner ul li a{
    font-size: .8rem;
}
.br_sp::before {
    content: "\A" ;
    white-space: pre ;
}
}
/*-- herobox..ends here --*/

/*-- intro..starts here --*/
#intro{
    padding: 0 .5%;
    display: flex;
    text-align: left;
    margin-top: 60px;
}
#intro h3{
    text-align: left;
    font-size: 2.4rem;
    line-height: 4rem;
    color: rgb(46, 46, 46);
    margin-left: 60px;
}
.leftbox{
    width: 49%;
}
.leftbox img{
    width: 100%;
    /* height: 100%; */
}
.rightbox{
    width: 51%;
    padding: 5% 0 0 9%;
    line-height: 3rem;
}
.rightbox p{
    margin-bottom: 40px;
    text-align: justify;
}
.rightbox p span{
    font-weight: bold;
}
@media screen and (max-width: 767px) {
    #intro{
        width: 88%;
        padding: 0;
        display: block;
        text-align: left;
        margin: 30px auto 70px;
        position: relative;
    }
    #intro h3{
        text-align: left;
        font-size: 1.7rem;
        line-height: 3rem;
        margin-left: 0;
        margin-bottom: 20px;
    }
    .leftbox{
        width: 100%;
    }
    .rightbox{
        width: 100%;
        padding: 0;
        line-height: 2.8rem;
        z-index: 100;
        font-size: 1.2rem;
    }
    .rightbox p{
        margin-bottom: 20px;
    }
    #intro img{
        width: 80%;
        margin-left: auto;
    }
}
/*-- intro...ends here --*/

/*-- securities.starts here --*/
#securities ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
#securities ul li{
    width: calc(100%/3);
    /* background-color: #eee;
    background-color: rgb(244, 244, 244); */
    background-color: #fcfcfc;
    padding: 40px;
    border: #A59C7B 1px dashed;
    border: #F2F0E9 1px dashed;
    position: relative;
}
#securities ul li h4{
    font-size: 2.4rem;
    margin-bottom: 20px;
    display: flex;
    align-items: baseline;
}
#securities ul li h4 span:first-child{
    font-size: 3.2rem;
    color: pink;
    color: #002c54;
    color: #A59C7B;
    margin-right: 15px;
}
#securities ul li h4 span:last-child{
    font-size: 2.2rem;
}
#securities ul li p{
    font-size: 1.4rem;
    line-height: 2.2rem;
    letter-spacing: 0;
    text-align: justify;
    margin: 15px 0;
    padding-bottom: 20px;
}

/* #securities ul li div{
    background-color: white;
} */
#securities ul li img{
    width: 100%;
}
#securities ul li a{
    font-size: 1.3rem;
    padding: 8px 20px;
    /* background-color:grey; */
    background-color: #756867;
    background-color: #F2F0E9;
    color: white;
    color: #2f2f28;
    border-radius: 3px;
    display: block;
    position: absolute;
    bottom: 5%;
    left: 10%;
}
@media screen and (max-width: 821px) {
    #securities{
        width: 95%;
        font-feature-settings: "palt"!important;
    }
    #securities h3{
        line-height: 3.6rem;
    }
    #securities ul li{
        width: 50%;
        padding: 12px 8px;
    }
    #securities ul li h4{
        font-size: 1.45rem;
        margin-bottom: 6px;
        font-feature-settings: "palt"!important;
    }
    #securities ul li:last-child h4{
        letter-spacing: -0.1rem;
    }
    #securities ul li h4 span:first-child{
        font-size: 1.45rem;
        margin-right: 5px;
    }
    #securities ul li h4 span:last-child{
        font-size: 1.2rem;
    }
    #securities ul li p{
        font-size: 1rem;
        line-height: 1.8rem;
        margin: 10px 0;
        padding-bottom: 20px;
    }
    #securities ul li a{
        font-size: 1rem;
        padding: 3px 10px;
        bottom: 5px;
        left: 4%;
    }
}
/*-- securities...ends here --*/

/*-- exceptional.starts here --*/
#exceptional{
    /* padding: 0 0 15px; */
    text-align: center;
    /* background: -moz-linear-gradient(bottom, white 95%, transparent);
    background: -webkit-linear-gradient(bottom, white 95%, transparent);
    background: linear-gradient(to top, white 95%, transparent); */
    margin: -40px calc(50% - 50vw) 0;
    /* background-color: lightgray; */
    background-color: #F2F0E9;
    width: 100vw;
    max-width: 100vw;
    padding: 60px 0;
    background-image: url("https://www.corporatetest1.nandemo-dubbing.com/test/img/test5.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

#exceptional div{
    background: gray;
    background: #002b54bf;
    width: 90%;
    margin: 0 auto;
    max-width: 1200px;
}
#exceptional div:last-child{
    padding: 20px 0;
    background: rgba(243, 243, 243, 0.815);
    background:  #ffffff88;;
}
.except_inner{
    display: flex;
    justify-content: space-around;
}
#exceptional h3{
    width: 50%;
    position: relative;
    margin: auto ;
    color: white;
}

#exceptional h3 span{
    font-size: 2rem;
    display: block;
    margin-bottom: -10px;
    z-index: 100;
    color: white;
}

.except_inner ul{
    width: 50%;
    background: rgb(255, 255, 255);
    padding: 30px 0;
}
.except_inner ul li{
    font-size: 2.2rem;
    display: flex;
    align-items: center;
    margin: 20px 0 25px 40px;
}
.except_inner ul li img{
    width: 20px;
    margin-right: 10px;
}
#exceptional p{
    margin-bottom: 10px;
    font-size: 1.4rem;
}
@media screen and (max-width: 767px) {
    #exceptional{
        margin: 40px calc(50% - 50vw);
        padding: 60px 0;
    }   
    #exceptional div{
        width: 92%;
        margin: 0 auto;
        max-width: 767px;
    }
    #exceptional div:last-child{
        padding: 20px 0;
    }
    .except_inner{
        display: block;
    }
    #exceptional h3{
        width: 60%;
        line-height: 2.4rem;
        padding: 20px 0;
    }   
    #exceptional h3 span{
        font-size: 1.6rem;
        margin-bottom: -15px;
    }  
    .except_inner ul{
        width: 100%;
        padding: 10px 0;
    }
    .except_inner ul li{
        font-size: 1.6rem;
        margin: 15px auto;
        width: 85%;
        text-align: left;
        align-items: top;
    }
    .except_inner ul li img{
        width: 15px;
    }
    #exceptional p{
        font-size: 1.2rem;
    }
}
/*-- btn --*/
.btn_wr{
    display: flex;
    margin: 0 auto;
    justify-content: center;
    gap: 2%;
}
.btn_wr li{
    width: 22%;
    padding:10px;
    background-color: lightgray;
    background: #002c54;
    text-align: center;
    border-radius: 3px;
    color: white;
    transition: .3s ease-in-out;
    cursor: pointer;
    box-shadow: 1px 1px 0px rgba(125, 125, 125, 0.2);
}
.btn_wr li:last-child{
    background-color: #A59C7B;
    color: white;
}
.btn_wr li:last-child a{
    color: white;
}
.btn_wr li:hover{
    opacity: .7;;
}
@media screen and (max-width: 767px) {
    .btn_wr li{
        width: 40%;
        padding:7px;
        font-size: 1.2rem;
    }
}
/*-- btn --*/
/*-- exceptional..ends here --*/


/*-- achievements.starts here --*/
#achievements{
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    margin-bottom: 0;
    background-image: url("https://www.corporatetest1.nandemo-dubbing.com/test/img/achievement.png");

    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0 5px;
}
#achievements h3{
    width: 40%;
    /* margin-top: 60px; */
    /* background: white; */
    color: gray;
    padding: 40px;
    /* margin-left: 20px; */
    margin-bottom: 0;

}
#achievements ul{
    width: 50%;
}
#achievements ul li{
    width: 100%;
    text-align: center;
}
#achievements ul li p{
    margin-bottom: 20px;
    overflow: hidden;
    line-height: 3rem;
}
#achievements ul li .number4{
    font-size: 6rem;
    margin-left: 45px;
    margin-right: 10px;
    font-weight: bold;
    /* color: white; */
    text-shadow: -1px 2px 0 rgba(255,255,255,1);
    line-height: 8rem;
}

.slide-in {
    overflow: hidden;
      display: inline-block;
  }
  
  .slide-in_inner {
    display: inline-block;
  
  }
  
  /*左右のアニメーション*/
  .leftAnime{
      opacity: 0;
  }
  
  .slideAnimeLeftRight {
    animation-name:slideTextX100;
    animation-duration:1.4s;
    animation-fill-mode:forwards;
      opacity: 0;
  }
  
  @keyframes slideTextX100 {
    from {
    transform: translateX(-100%);
          opacity: 0;
    }
  
    to {
    transform: translateX(0);
      opacity: 1;
    }
  }
  
  .slideAnimeRightLeft {
    animation-name:slideTextX-100;
    animation-duration:1.4s;
    animation-fill-mode:forwards;
      opacity: 0;
  }
  
  
  @keyframes slideTextX-100 {
    from {
    transform: translateX(100%);
      opacity: 0;
    }
  
    to {
    transform: translateX(0);
      opacity: 1;
    }
  }


@media screen and (max-width: 767px) {
    #achievements{
        flex-wrap: wrap;
        margin-bottom: 0;
        margin-top: 70px;
    }
    #achievements h3{
        width: 60%;
        margin-top:-50px;
        margin-bottom: 20px;
        padding:20px;
        border-bottom: solid 3px var(--color-white-trans); 
        display: inline-block;
        background-color: var(--color-white-trans); 
    }
    #achievements ul{
        width: 100%;
    }
    #achievements ul li p{
        font-size:1.4rem;
    }
    #achievements ul li .number4{
        font-size: 3rem;
        margin-left: 0px;
        margin-right: 0px;
        line-height: 4rem;
    }
}
/*-- achievements..ends here --*/

/*-- examples.starts here --*/
#examples{
    margin-top: 0;
}
#examples h4{
    font-size: 1.6rem;
    font-weight: bold;
    padding: 10px 20px;
    color: white;
    background-color: #838383;
    margin: 0px 0 -20px;
}

#examples ul{
    margin: 50px auto 0;
    width: 95%;
}
#examples ul li{
    display: flex;
    margin: 30px 0;
    align-items: center;
    gap: 45px;
    text-align: justify;
    padding-bottom: 20px;
}
#examples ul li h5{
    font-weight: bold;
    color: darkgray;
    font-size: 2.4rem;
}

.icon img{
    width: 200px;
}
.txt a{
    color: red;
}
.comment{
    margin-top: 10px;
}

.tohoku{
    display: flex;
    margin-bottom: 20px;
    align-items: center;
    gap: 1%;
}
.tohoku h5{
    width: 13%;
    /* padding: 0;
    margin: 0; */
    text-align: left;
}
.tohoku p{
    width: 87%;
    font-size: 1.4rem;
    line-height: 2rem;
    padding: 0;
    margin: 0;
}
@media screen and (max-width: 767px) {
    #examples{
        margin-top: -20px;
    }
    #examples h4{
        font-size: 1.6rem;
        margin: 20px 0;
    }
    #examples ul{
        margin: 20px auto 0;
        width: 95%;
    }
    #examples ul li{
        align-items: flex-start;
        gap: 15px;
        padding-bottom: 20px;
        margin: 20px 0 25px;
        border-bottom: #838383 1px dashed;
    }
    #examples ul li:last-child{
        border-bottom: none;
    }
    #examples ul li h5{
        font-size: 1.8rem;
        margin-top: -5px;
    }
    .icon img{
        width: 100px;
    }
    .comment{
        margin-top: 6px;
        font-size: 1.2rem;
        line-height: 2rem;
    }
    .tohoku{
        display: block;
        margin-bottom: 10px;
    }
    .tohoku h5{
        width: 100%;
    }
    .tohoku p{
        width: 100%;
        font-size: 1rem;
        line-height: 1.8rem;
    }
    .tohoku_comment{
            display: block;
            width: 155%;
            margin-left: -55%;
    }
}
/*-- examples..ends here --*/

/*-- indication.starts here --*/
#indication{
    width: 100vw;
    text-align: center;
    /* background-image: url("https://www.corporatetest1.nandemo-dubbing.com/test/img/bg.jpg");
    background-size: contain;
    opacity: .5; */
    margin: 0 calc(50% - 50vw) 0;
    max-width: 100vw;
    background-color: rgb(235, 235, 235);
    padding: 100px 0 60px;
}
.indication_inner{
    /* height: 25vh; */
    width: 100%;
    text-align: left;
    background-image: url("https://www.corporatetest1.nandemo-dubbing.com/test/img/pic00.png");
    background-size: cover;
    color: white;
    padding: 50px;
    margin: 20px auto 0;
    max-width: 1200px;
}
.indication_inner h4,
.indication_inner p{
    width: 80%;
    margin: auto;
    color: white;
}
.indication_inner h4{
    font-weight: bold;
    font-size: 1.8rem;
    margin-bottom: 5px;
    position: relative;
}
.shoter::after,
.longer::after{
    content: '';
    width: 320px;
    height: 2px;
    display: inline-block;
    background-color: #ffffff;
    position: absolute;
    bottom: -5px;
    left: 0px;
}
.longer::after{
    width: 380px;
}
.indication_inner p{
    margin-bottom: 25px ;
}
.indication_inner2{
    margin: 25px auto;
}
.indication_inner2 .btn_wr{
    margin: 25px auto;
}
#indication .btn_wr{
    max-width: 1200px;
}
@media screen and (max-width: 767px) {
    #indication{
        padding: 30px 0 10px;
    }
    #indication>p{
        width: 92%;
        text-align: left;
        margin: 0 auto;
    }
    .indication_inner{
        padding: 30px 5px;
        margin: 20px auto 0;
    }
    .indication_inner h4,
    .indication_inner p{
        width: 92%;
        font-size: 1.2rem;
        line-height: 2rem;
    }
    .indication_inner h4{
        font-size: 1.6rem;
        margin-bottom: 10px;
    }
    .shoter::after{
        width: 280px;
    }
    .longer::after{
        width: 320px;
    }
    .indication_inner2{
        margin: 25px auto;
        width: 92%;
        text-align: left;
        font-size: 1.4rem;
    }
    .indication_inner2 .btn_wr{
        margin: 25px auto;
    }
}

/*-- flow.starts here --*/
#flow{
    display: flex;
    align-items: center;
    margin-top: 80px;
    max-width: 1200px;
}
#flow h3{
    background: rgb(141, 141, 141);
    padding: 100px 20px;
    z-index: 1;
    color: white;
}
.flow_inner{
    width: 120%;
    margin: 0 auto;
    background-color: lightgray;
    z-index: 1;
    padding: 50px 70px 0px;
    padding-left: 100px;
    margin-left: -100px;
    overflow: hidden;
}
.flow_inner ul{
    display: flex;
    align-items: top;
    justify-content: center;
    margin: 0 auto 20px;
    padding-left: 10px;
}
.flow_inner ul li{
    width: 20%;
    margin-bottom: 30px;
    text-align: center;
    position: relative;
}
.flow_inner ul li:nth-child(even){
    width: 3%;
}
.flow_inner ul li img{
    width: auto;
    height: 135px;
    margin-bottom: 10px;
}
.flow_inner ul li .pic_arrow{
    height: 30px;
    position: absolute;
    top: 35%;
    left: -10px;
}
.flow_inner ul li p{
    font-size: 1.2rem;
    line-height: 1.6rem;
    width: 80%;
    margin: -20px auto 0;
}
.status{
    /* background-color: gray; */
    padding: 15px;
    text-align: center;
    color: white;
    width: 150%;
    max-width: 1000px;
    position: relative;
    margin-left: -100px;
}


@media screen and (max-width: 769px) {
    #flow{
        width: 92%;
        display: block;
        margin: 80px auto;
        position: relative;
    }
    #flow h3{
        padding: 20px;
        position: absolute;
        top: -30px;
        left: 15%;
        width: 70%;
    }
    .flow_inner{
        width: 100%;
        margin: 0 auto;
        padding: 70px 0 0;
        margin-left: 0px;
    }
    .flow_inner ul{
        width: 95%;
        align-items: flex-start;
        padding-left: 0px;
        margin-bottom: 5px;
    }
    .flow_inner ul li{
        width: 22%;
        margin-bottom: 30px;
    }
    .flow_inner ul li:first-child{
        margin-left: 0px;
    }
    .flow_inner ul li:nth-child(even){
        width: 4%;
        height: 30px;
        margin-top: 25px;
    }
    .flow_inner ul li img{
        width: auto;
        height: 65px;
        margin-bottom: 5px;
    }
    .flow_inner ul li .pic_arrow{
        height: 20px;
        top: 0;
        left: -5px;
    }
    .flow_inner ul li p{
        font-size: 1rem;
        line-height: 1.6rem;
        margin: -10px auto 0;
        width: 100%;
    }
    .status{
        padding: 10px;
        width: 100%;
        border-radius: 0%;
        margin: 0;
    }
}
/*-- flow..ends here --*/

.bg0{
    background-image: url("https://www.corporatetest1.nandemo-dubbing.com/test/img/bg02.jpg");
    background-size: cover;
    margin: -40px calc(50% - 50vw) 0;
    width: 100vw;
    max-width: 100vw;
    padding: 40px 0;
    border-bottom: 1px solid #000;
}

/*-- quote..starts here --*/
@media (min-width:770px){
    #quote{
        background:  var(--color-white-trans);
        padding-top: 40px;
        margin-top: 40px;
        border-radius: 3px;
        width: 90%;
        overflow: hidden;
    }
    .txt01{
        text-align: center;
    }
    .cul{
        width: 100%;
        margin:0 auto;
    }
    .cul table{
        width: 80%;
        margin:0 auto;
    }
    .cul table th{
        text-align: left;
        font-size: 20px;
    }
    .cul table th,
    .cul table td{
        padding:20px;
        vertical-align: top;
        vertical-align: text-top;
        border:5px solid #efefef;
        background-color: #f7f7f7;
    }
    .cul table th{
        color: #523d33;
    }
    .cul table td{
        background-color: #fff;
    }
    .cul .media,
    .cul .mediaanshin{
        cursor: pointer;
        border:1px solid #ccc;
        padding:5px 20px;
        border-radius: 7px;
        font-weight: bold;
    }
    .cul .media.active,
    .cul .mediaanshin.active{
        background-color:  var(--main-color-lighter);  
        color: #fff;
    }
    .cul .sol{
        border:none;
        border-bottom: 1px solid #333;
        font-size: 25px;
        width: 150px;
        text-align: right;
        margin-left: 10px;
        line-height: 20px;
        font-weight: bold;
        background-color: #fff;
    }
    .cul .enPrice{
        font-size: 20px;
        font-weight: bold;
        padding:0 10px 0 10px;
    }
    .cul .notice{
        width: 80%;
        font-size: 12px;
        margin: 5px auto;
        padding-bottom: 0px;
        line-height: 2.4rem;
    }

    .bgWhiteBox{
    width: 100%;
    margin:0 auto;
    padding-bottom:40px;

    }
    .bgWhiteBox.cul2{
    padding-top:20px;
    }
 }
    
@media (max-width:769px){
    #quote{
        background:  var(--color-white-trans);
        padding: 30px 0;
        margin: 0 auto;
        width: 92%;
        border-radius: 3px;
    }
    .txt01{
        font-size: 1.2rem;
        line-height: 2rem;
        width: 92%;
        margin: 0 auto;
        text-align: left;
    }
    .cul{
        width: 95%;
        margin:20px auto;
    }
    .cul table{
        width: 100%;
        margin-bottom: 5px;
    }
    .cul table th{
        text-align: left;
        font-size: 1.6rem;
    }
    .cul table th,
    .cul table td{
        padding:12px;
        border:3px solid #efefef;
        background-color: #f7f7f7;
        display: block;

    }
    .cul table th{
        color: #523d33;
    }
    .cul table td{
        background-color: #fff;
    }
    .cul .media,
    .cul .mediaanshin{
        cursor: pointer;
        border:1px solid #ccc;
        padding:5px 10px;
        border-radius: 7px;
        font-weight: bold;
    }
    .cul .media.active,
    .cul .mediaanshin.active{
        background-color:  var(--main-color-lighter);  
        color: #fff;
    }
    .cul .sol{
        border:none;
        border-bottom: 1px solid #333;
        font-size: 25px;
        width: 150px;
        text-align: right;
        margin-left: 10px;
        line-height: 20px;
        font-weight: bold;
        background-color: #fff;
    }
    .cul .enPrice{
        font-size: 1.6rem;
        font-weight: bold;
        padding:0 5px;
    }
    .cul .notice{
        font-size: 1rem;
        line-height: 1.6rem;
        width: 95%;
        margin: 0 auto;
    }
}
/*-- quote..ends here --*/

/*-- faq_contact_wr starts here --*/
.faq_contact_wr{
    display: flex;
    text-align: center;
    gap: 5%;
    max-width: 1200px;
    margin: -50px auto 0px;
    padding-bottom: 40px;
}
.faq_contact_wr section{
    background:  var(--color-white-trans);
   padding: 30px 0;
   margin: 0 auto;
   align-items: center;
   vertical-align: middle;
   width: 90%;
   border-radius: 3px;
}
@media screen and (max-width: 769px) {
    .faq_contact_wr{
        display: block;
        margin: 20px auto;
        padding-bottom: 10px;
    }
    .faq_contact_wr section{
       width: 92%;
       padding: 20px 0;
       margin: 20px auto;
    }
}

/*-- QandA starts here --*/
#QandA{
    position: relative;
} 
.button {
    margin: 10px;
    margin-left: 60px;
    margin-top: 40px;
    width: 150px;
    height: 50px;   
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    color: #000;
    border: 1px solid;
    cursor: pointer;
    position: relative;
    background: #fff;
    border-radius: 3px;
}
.button:hover span{
    color: #fff;
    z-index: 100;
} 
.button:hover::before{
    color: #fff;
} 
.button:hover::after{
    width: 100%;
} 
.button:before{
      content: attr(data);
      display: block;
      position: relative;
      transition: color 300ms;
      z-index: 1;
    }
.button::after{
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      height: 100%;
      background-color: #333;
      transition: width 300ms;
      width: 0;
      z-index: 0;
}
.arrow {
  display: inline-block;
  position: relative;
  top: 30px;
  right: 40px;
  width: 80px;
  margin: 30px 0;
}
.line01 {
  height: 1px;
  background-color: #000;
}
.line02 {
  position: absolute;
  top: 0;
  right: 0;
  transform-origin: right bottom;
  width: 20px;
  height: 1px;
  background-color: #000;
  transform: rotate(45deg);
}

/*-- contact starts here --*/
.contact_inner p{
    font-size: 1.6rem;
    border: none;
}
.contact_inner .tw_02{
    margin: 8px 0;
}
.contact_inner .tw_02 img{
    width: 5%;
    margin-right: 10px;
}
.contact_inner .tw_03{
    font-size: 1.4rem;
    margin-bottom: 20px;
    letter-spacing: 0.1rem;
}
.contact_inner .tel_no{
    font-size: 2.6rem;
    letter-spacing: 0.3rem;
}
.faq_contact_wr .btn_wr li{
    width: 50%;
}
@media screen and (max-width: 769px) {
    .contact_inner p{
        font-size: 1.4rem;
    }
    .contact_inner .tw_02 img{
        width: 8%;
    }
    .contact_inner .tw_03{
        font-size: 1.2rem;
        letter-spacing: 0.1rem;
    }
    .contact_inner .tel_no{
        font-size: 2.4rem;
        letter-spacing: 0.1rem;
    }
}


/*//////// footer.php ///////////*/
footer{
    width: 100vw;
    background-color:lightgray;
    text-align: center;
}

footer ul{
    width: 75%;
    max-width: 1200px;
    margin: auto;
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    padding: 20px 0;
}
footer ul li{
    width: calc(100%/6);
}
footer li a:hover{
    color: red;
} 
footer ul li:first-child{
    margin-left: -20px;
}
small{
    display: block;
    background-color: white;
    padding: 10px 0;
}

@media screen and (max-width: 767px) {
    footer ul{
        flex-wrap: wrap;
        text-align: left;
    }
    footer ul li{
        width: calc(90%/3);
        margin: 7px auto 3px;
    }
    footer ul li:first-child{
        margin-left: auto;
    }
    footer ul li:nth-child(1),footer ul li:nth-child(4){
        width: calc(70%/3);
    }
}


  #scroll-to-top-btn{
	position: fixed;
	bottom: 10px;
	right: 10px;
	height: 50px;
	width: 50px;
	color: #FFF;
	/* font-size:30px;
	font-weight: bold; */
	background-color:#9E9E9E;
	border: none;
	border-radius: 50%;
	/* transform: rotate(-90deg); */
	opacity: 0;
	transition-duration: 0.5s;
  }
  #scroll-to-top-btn i{
      margin-left: 13.5px;
  }
  #scroll-to-top-btn:hover i{
    transform: scale(1.1);
    cursor: pointer;
}


 /*//////// color panel ///////////*/

h1,h2,h3,h4,h5,p,a,span, label, small, li{
    color: var(--text-color); 
}
h3{
    color: var(--text-color); 
    text-shadow: -1px 2px 0 rgba(255,255,255,1);
}

/* メイン */
main{
    background-color:  var(--bg-color); 
}


/* header */
header{
    background-color: var(--color-white); 
    box-shadow: 1px 1px 0px rgba(125, 125, 125, 0.2);
}
.logo_wr h1{
    color:  var(--accent-color); 
}
/* メニュー　ホバー */
.menu li a{
    position: relative;
} 
.menu li a:hover{
    color: var(--accent-color-trans);  
} 
.menu li a::after {
    content: '';
    position: absolute;
    top: 110%;
    left: 25%;
    width: 50%;
    height: 2px;
    background:var(--accent-color);  
    transition: all .3s;
    transform: scale(0, 1);
    transform-origin: center top;
}
.menu li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}


/* メニュー　子メニュー出現背景 */
.menu li:hover > ul > li{
    background-color: var(--color-white); 
}
.menu li:hover > ul > li a::after {/* 打ち消し用 */
    content: '';
    position: absolute;
    top: 100%;
    left: 25%;
    width: 50%;
    height: 2px;
    background:var(--accent-color);  
    transition: all .3s;
    transform: scale(0, 1);
    transform-origin: center top;
}


/* 資料請求（トップ） */
.top_btn_wr ul li{
    background:  var(--accent-color);
    color: var(--text-invert-color);
}
.top_btn_wr ul li a{
    color: var(--text-invert-color);
}
/* お問い合わせ（トップ） */
.top_btn_wr ul li:last-child{
    background-color: var(--accent-sub-color); 
}
/* SP */
.sp_contact{
    background-color:   var(--accent-sub-color); 
}
.sp_contact p{
    color: var(--text-invert-color);
}
.hamburger {
    background: var(--accent-color);   
}
.hamburger__line {
    background-color:  var(--color-white);   
 }
.sp-nav {
    background-color: var(--color-white); 
    /* border-top:  var(--text-color) 1px solid; */
 }
.sp-nav .tel_wr{
    background-color: var(--accent-sub-color);   
}
.sp-nav .dl{
    background-color: var(--accent-color); 
    color:  var(--color-white); 
}



/* メインビュー */
/* .herobox_inner h3, 
.herobox_inner h2,
.herobox_inner p{
    background-color: rgba(0, 0, 0, 0.434);
    color: white ;
    text-shadow: none;
}
.herobox_inner h3{
    background-color: rgba(0, 0, 0, 0.434);
    width: 50;
} */

.herobox_inner ul li:first-child a{
    background-color: var(--accent-color);  
    color: var(--text-invert-color);  
}

/* .herobox_inner ul li:first-child a:hover{
    background-color:var(--color-white);  
    color: var(--accent-color); 
} */
.herobox_inner ul li:last-child a:hover{
    opacity: 0.8;
    background-color: var(--accent-sub-color); 
}

/* intro */
#intro h3{
    color: var(--text-color);   
}


/* securities */
#securities ul li{
    /* background-color: var(--color-white);  */
    background-color:  var(--bg-color-lighter);  
    border:  var(--bg-color) 1px dashed;
}
#securities ul li h4 span:first-child{
    color:   var(--main-color);   
}
#securities ul li a{
    /* background-color: var(--bg-color);    */
    color: var(--text-color); 
    background: -moz-linear-gradient(top, #F2F0E9 0%, #F6F4F0 50%, #FBFAF8 100%);
    background: -webkit-linear-gradient(top, #F2F0E9 0%, #F6F4F0 50%, #FBFAF8 100%);
    background: linear-gradient(to bottom, #F2F0E9 0%, #F6F4F0 50%, #FBFAF8 100%);

    transition: .3s ease-in-out;
    cursor: pointer;
    box-shadow: .5px .5px 0px rgba(178, 178, 178, 0.2);
}
#securities ul li img{
	transform: scale(1);
	transition: .3s ease-in-out;
    box-shadow: .5px .5px 0px rgba(178, 178, 178, 0.2);
}
#securities ul li:hover img{
    opacity: .7;
}
#securities ul li:hover a{
    opacity: .7;
}


/* exceptional */
/* #exceptional{
    background-color: 	#285A87;  
} */
#exceptional h3{
    color: var(--text-invert-color); 
    text-shadow: -1px 2px 0   #002b5465;     ;
}
#exceptional h3 span{
    color: var(--text-invert-color); 
}
#exceptional div{
    background: var(--accent-color-trans);  
}
#exceptional div:last-child{
    background:   var(--color-white-trans);   
}
.except_inner ul{
    background: var(--color-white);  
}
.btn_wr li{
    background: var(--accent-color);   
    color: var(--text-invert-color); 
}
.btn_wr li:last-child{
    background-color: var(--accent-sub-color); 
    color: var(--text-invert-color);
}
.btn_wr li:last-child a{
    color: var(--color-white);   
}
.btn_wr li:first-child a{
    color: var(--color-white);   
}



/* achievements */
#achievements h3{
    /* background:  var(--color-white-trans);   */
    color: var(--text-color);  
}


/* examples */
#examples h4{
    color:  var(--color-white);  
    background-color: var(--main-color);  
}
#examples ul li h5{
    color: var(--main-color);  
}
.txt a{
    color: var(--link-color); 
}


/* indication */
#indication{
    background-color:  var(--bg-color-lighter);  
}
.indication_inner{
    color: var(--color-white);    
}
.indication_inner h4,
.indication_inner p{
    color: var(--text-invert-color); 
}
.shoter::after,
.longer::after{
    background-color: var(--color-white);  
}


/* flow  */
#flow h3{
    background:  var(--accent-color-trans); 
    color:  var(--text-invert-color); 
    text-shadow: -1px 2px 0   #002b5465;     ;

}
.flow_inner{
    background:   var(--color-white);  
    box-shadow: 1px 1px 0px rgba(191, 191, 191, 0.2);


}
.status{
    background-color:  var(--accent-color-trans); 
    color: var(--text-invert-color); 
}


/* quote  */
.cul table th,
.cul table td{
    border:3px solid var(--main-color-lighter); 
    background-color: var(--color-white); 
}
.cul table th{
    color: var(--text-color); 
}
.cul table td{
    background-color: var(--color-white);  
}
.cul .media,
.cul .mediaanshin{
    border:1px solid var(--main-color-lighter); 
}
.cul .media.active,
.cul .mediaanshin.active{
    background-color: var(--main-color); 
    color: var(--text-invert-color); 
}
.cul .sol{
    border-bottom: 1px solid var(--main-color-lighter); 
    background-color:  var(--color-white);   
}
.cul .col{
    border:1px solid var(--main-color-lighter); 
}


/* contact  */
.button {
    color:  var(--bg-color);    
    border: 1px solid  var(--main-color);      ;
    background:  var(--color-white);     
}
.button:hover span{
    color: var(--text-invert-color); 
} 
.button:hover::before{
    color: var(--text-invert-color); 
} 
.button::after{
    background-color:  var(--main-color);   
}
.line01 {
    background-color:  var(--main-color);   
}
.line02 {
    background-color:  var(--main-color);   
}


/* footer  */
footer{
    background-color:var(--color-white);     
}
footer li a:hover{
    color: var(--accent-color-trans);  
} 
small{
    background-color:  var(--bg-color);   
}
#scroll-to-top-btn{
	color: var(--text-invert-color); 
	background-color: var(--accent-sub-color);   
}





.sp_contact{
    text-align: center;
}

.fa-lg{
    color: var(--text-invert-color);  
    display: inline-block;

    position: absolute;
    top: 25px;
    left: 40px;
    
}
.fa-lg:first-child{
    left: 15px;
}
.herobox_inner ul{
    margin-left: 0;
}

.breadcrumbs{
    width: 100%;
    height: 40px;
    background-color: white;
}
.breadcrumbs p{
    width: 80%;
    color:  var(--text-color);  
    margin: 0 auto;
    padding-top: 8px;
    font-size: 1.4rem;
}

@media screen and (max-width: 767px) {
    .breadcrumbs p{
        font-size: 1rem;
    }
}

/* Facebook */
#facebook{
    position: fixed;
	bottom: 70px;
	right: 10px;
	height: 50px;
	width: 50px;
	opacity: 0;
	transition-duration: 0.5s;
    z-index: 100;
}

#facebook:hover{
    transform: scale(1.1);
    cursor: pointer;
}

iframe{
    margin-bottom: 10px;
}



@media screen and (max-width: 768px) {
    #facebook{
        display: none;
    }
    iframe{
        width:300px;
        margin-bottom: 10px;
    }
}


/*簡単見積css*/


#mitsumori-js {
padding:50px;	
max-height:600px;
	
	display: block;
	margin: auto;
box-sizing:border-box;
}

@media screen and (max-width: 468px) {
#mitsumori-js {	
padding:10px;	
max-height:600px;
	
	display: block;
	margin: auto;
box-sizing:border-box;

    }
}
#mitsumori-js table {
	background-color:#FFF;
    width:100%;
    border-collapse: collapse;
    border-spacing: 0;
}
#mitsumori-js .mitsumori-js-tbl {
	background-color:#FFF;
    margin-bottom:15px;
	margin-top: 15px;
}

#mitsumori-js #totalzei {
margin-top: 10px;

}
#mitsumori-js .mitsumori-js-total-tbl {
    width:380px;
    margin-left:auto;
}

@media screen and (max-width: 468px) {
	#mitsumori-js .mitsumori-js-total-tbl {
    width:300px;
    margin-left:auto;
    }
}

@media screen and (max-width: 468px) {
	#mitsumori-js .sptotal .mitsumori-js-total-tbl {
    width:200px;
    
    }
}



#mitsumori-js .mitsumori-js-total-tbl th {
    width:24%;
	font-size: 14px;
}

@media screen and (max-width: 468px) {
	#mitsumori-js .mitsumori-js-total-tbl th {
    width:14%;
	font-size: 13px;
    }
}





#mitsumori-js th,
#mitsumori-js td {
    border:1px solid #ccc;
    padding:8px;
	font-size: 14px;
}
@media screen and (max-width: 768px) {
	#mitsumori-js td {
    border:1px solid #ccc;
    padding:8px;
	font-size: 14px;
	
}
}

#mitsumori-js .item-name {
    width:30%;
	background-color: #1a2872;
	color: #fff;
	
}

@media screen and (max-width: 768px) {
#mitsumori-js .item-name {
    width:30%;
	background-color: #1a2872;
	color: #fff;
	
}
}
#mitsumori-js .item-quantity {
    width:45%;
}
#mitsumori-js .item-price {
    width:25%;
}

input.unit-price{
border: solid 1px #ccc;
}

@media screen and (min-width: 468px){
.br-sp {display: none; }
p.noticea {
padding: 15px;	

}

p.noticea {
padding: 15px;	
}