@charset "utf-8";
/* CSS Document */
html { 
	scroll-behavior: smooth;
}

p {
    font-family: 'Roboto', sans-serif;
}

ul {
    list-style: none !important;
}

h3 {
    text-decoration: none;
    font-size: 1.5em;
    color: white;
    font-style: italic;
}

.card {
    background-color: rgba(255, 255, 255, 0.8) !important;
}

.linkfont {
    font-size: 20px;
    font-weight: bold;
    color: black !important;
}

.linkfont:hover {
    text-decoration: none !important;
    color: #2FB0C9 !important;
}

.under {
    font-family: 'Bebas Neue', cursive;
    font-size: 3em;
    padding-bottom: 2px !important;
    margin-right: 20px;
}

.under-line {
    border-bottom: solid 2px black;
    max-width: 233px;
    display: inline-block !important;
}

.sliderimg {
  width: 100%;
}

.header-img {
    max-width: 400px;
    width: 100%;
}

.font-style1 {
    font-family: 'Bebas Neue', cursive;
    font-size: 2em;
    border-bottom: solid 2px black;
    display: inline-block;
    padding-bottom: 1px !important;
}

.font-style2 {
    font-family: 'Bebas Neue', cursive;
    font-size: 2em;
    border-bottom: solid 2px white;
    color: white !important;
    display: inline-block;
    padding-bottom: 1px !important;
}

.font-style3 {
    font-size: 1.5em;
    color: #212529;
    font-style: normal;
    font-family: 'Bebas Neue', cursive;
    border-bottom: solid 2px black;
    display: inline-block;
    padding-bottom: 1px !important;
}

.catch-bold {
    font-family: 'Bebas Neue', cursive;
    font-size: 2em;
}

.whitebg {
    background-color: rgba(255, 255, 255, 0.8);
}

.acline {
    border: solid 2px #2FB0C9;
    width: 50px;
    text-align: left;
    margin-left: 0px;
}

/* 通常のボタン色 */
.btn-primary,
.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: #2FB0C9;
  border-color: #2FB0C9;
}

/* focusされた時の枠線の色 */
.btn-primary:focus, .btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

/* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定）*/
.btn-primary:hover {
  color: #fff;
  background-color: #117080;
  border-color: #117080;
}

/* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #117080;
  border-color: #117080;
}

/* 2ndary 通常のボタン色 */
.btn-secondary,
.btn-secondary.disabled, .btn-secondary:disabled {
  color: #fff;
  background-color: #117080 !important;
  border-color: #117080 !important;
}

/* focusされた時の枠線の色 */
.btn-secondary:focus, .btn-secondary.focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5) !important;
}

/* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定）*/
.btn-secondary:hover {
  color: #fff;
  background-color: #00434E !important;
  border-color: #00434E !important;
}

/* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */
.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: #00434E !important;
  border-color: #00434E !important;
}

/* くのじ矢印 */
.arrow {
  position: relative;
  display: inline-block;
  padding: 10px;
}

.arrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-top: solid 2px #FFF;
  border-right: solid 2px #FFF;
  position: absolute;
  left: 4px;
  top: 10px;
}

.arrow.arrow-right::before {
  transform: rotate(45deg);
}

.arrow2 {
  position: relative;
  display: inline-block;
  padding: 10px;
}

.arrow2::before {
  content: '';
  width: 8px;
  height: 8px;
  border-top: solid 2px #2FB0C9;
  border-right: solid 2px #2FB0C9;
  position: absolute;
  left: 4px;
  top: 10px;
}

.arrow2.arrow-right2::before {
  transform: rotate(45deg);
}
/* くのじ矢印ここまで */

.text-primary {
    color:#4E191A !important;
    font-family: 'Bebas Neue', cursive !important;
    font-size: 3em;
}

/* ナビ設定1 */
.nav {
    min-height: 100px;
    align-items: center;
}

.nav .nav-item .nav-link {
    color: black !important;
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
}

.nav .nav-item .nav-link:hover {
    color: gray !important;
    border-bottom: solid 1px gray;
}

.navline {
   border-left: solid 1px black;
}

/* ナビ設定2 */
.nav .nav-item2 .nav-link2 {
    color: white !important;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}

.nav .nav-item2 .nav-link2:hover {
    color: lightgray !important;
    border-bottom: none !important;
}

.nav-item2 {
    padding: 0 5px 0 0;
}

.navline2 {
    border-left: solid 1px white !important;
    padding: 0 0 0 5px;
}

/* 背景設定 */
.firstview {
    background-image: url("images/bg1.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 400px;
    object-fit: cover;
}

.firstview2 {
    background-image: url("images/bg1.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
}

.malaysiamap {
    background-image: url("images/malaysiamap.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.japanmap {
    background-image: url("images/japanmap.jpg");
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: contain;
}

.books {
    background-image: url("images/books.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}

.wwh-area {
    background: linear-gradient(180deg, #117080 0%, #117080 70%, #fff 70%, #fff 100%);
    min-height: 400px;
}

.products-area {
    background: linear-gradient(180deg, #fff 0%, #fff 50%, #F1F0EC 50%, #F1F0EC 100%);
    min-height: 400px;
}

.flag {
    width: 100%;
    height: 100%;
    min-height: 400px;
    position: right bottom;
    object-fit: cover;
}

/*回転エリア*/
ul {
    padding-inline-start: 0px !important;
}

/*
右から左へ
----------------------------*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/*
IE11対策
----------------------------*/
_:-ms-lang(x)::-ms-backdrop,
.d-demo {
  display: -ms-grid;
  overflow: hidden;
}
/*----------------------------*/

.d-demo__wrap {
  display: flex;
  overflow: hidden;
}

.d-demo__list {
  display: flex;
  list-style: none;
}

.d-demo__list--left{
animation :infinity-scroll-left 40s infinite linear 0.5s both;
}

.d-demo__item {
  width: calc(100vw / 6);
}

.d-demo__item > img{
   width: 100%;
}

/*回転エリアここまで*/

.box {
    border: solid #0086AD 2px;
    border-radius: 20px;
}

.boxfont-1 {
    text-decoration: none !important;
    font-size: 18px;
    color: black !important;
    margin-left: 10px;
}

.boxfont-2 {
    text-decoration: none !important;
    font-size: 14px;
    color: #0086AD !important;
    margin: 0 10px 0 10px;
}

.boxline {
    display: flex;
    align-items: center;
}

.boxline:after {
    content: "";
    height: 2px;
    flex-grow: 1;
    background-color: #0086AD;
    margin-left: 10px;
}

.contact-form {
    background: #2FB0C9;
}

footer {
	background: #117080;
}

.navbar-toggler-icon {
    color: #2FB0C9 !important;
}

@media screen and (max-width:767px) {
    .d-demo__item {
        width: calc(100vw / 2);
    }
}

@media screen and (min-width:992px) {
    .sp-menu {
        display: none;
    }

    .btn-firstview {
        max-width: 233px;
    }
    
    .footercopy {
        margin: -20px 0 0 0 !important;
    }
}

@media screen and (max-width:991px) {
    .pc-menu {
        display: none;
    }
    
    .image-hide {
        display: none !important;
    }
    
    .footermenu {
        display: none;
}
    
    .footercopy {
        margin: 30px 0 0 0 !important;
    }
    
    .sp-menu {
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    }
    
    .firstview {
        margin-top: 116px !important;
    }
    
    .firstview2 {
        margin-top: 116px !important;
    }

    /* ナビ設定1 */
    .nav-item .nav-link {
        color: black !important;
        font-family: 'Open Sans', sans-serif;
        font-size: 20px !important;
    }

    .nav-item .nav-link:hover {
        color: gray !important;
        border-bottom: none;
    }

    .navline {
       border-left: none;
    }
}

.cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_arrows {
	position: relative;
	display: flex;
	height: 200px;/*画面いっぱいにする場合100vh*/
	margin: 2em auto;
	justify-content: center;
	align-items: center;
}
.cp_arrows .cp_arrow {
	position: absolute;
	top: 50%;/*着地点（サンプルは[class:cp_arrows]height300pxの50%）*/
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	-webkit-transform-origin: 50% 50%;
	        transform-origin: 50% 50%;
	opacity: 0;
}
.cp_arrows .cp_arrowfirst {
	-webkit-animation: arrow-move08 2s ease-in-out infinite;
	        animation: arrow-move08 2s ease-in-out infinite;
}
.cp_arrows .cp_arrowsecond {
	-webkit-animation: arrow-move08 2s 1s ease-in-out infinite;
	        animation: arrow-move08 2s 1s ease-in-out infinite;
}
.cp_arrows .cp_arrow:before, .cp_arrows .cp_arrow:after {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 30px;
	height: 3px;
	content: '';
	background: #2FB0C9;
}
.cp_arrows .cp_arrow:before {
	-webkit-transform: rotate(30deg) translateX(-39%);
	        transform: rotate(30deg) translateX(-39%);
	-webkit-transform-origin: top left;
	        transform-origin: top left;
}
.cp_arrows .cp_arrow:after {
	-webkit-transform: rotate(-30deg) translateX(39%);
	        transform: rotate(-30deg) translateX(39%);
	-webkit-transform-origin: top right;
	        transform-origin: top right;
}
@-webkit-keyframes arrow-move08 {
	0% {
		top: 40%;/*スタート地点（サンプルは[class:cp_arrows]height300pxの35%）*/
		opacity: 0;
	}
	70% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes arrow-move08 {
	0% {
		top: 40%;/*スタート地点（サンプルは[class:cp_arrows]height300pxの35%）*/
		opacity: 0;
	}
	70% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}