@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Roboto:wght@500;700&display=swap");
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  font: inherit;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  border: 0;
}

/* PC スマホ　横幅で切替指定
*/
.for-pc { display:block; }
.for-sp { display:none; }

@media only screen and (max-width : 767px){
  .for-pc { display:none; }
  .for-sp { display:block; }
}

/* HTML5 display-role reset for older browsers
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

html {
  font-size: 62.5%;
  max-width: 100%;
  overflow-x: hidden;
}

ul {
  list-style: none;
}

.content{
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

body {
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
	
font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
 /* padding-bottom: 62px;*/
  font-size: 1.6rem;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #333;
}

@media screen and (min-width: 768px) {
  body {
    min-width: 980px;
    /*padding-bottom: 62px;*/
  }
}

@media screen and (max-width: 767px) {
  body {
    font-size: 15px;
    max-width: 100%;
  overflow-x: hidden;
  width: 100%;
  }
}

body.drawer-active {
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}

a {
  color: #003670;
  text-decoration: underline;
}
a:hover {
  color: #427dbd;
  text-decoration: underline;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  image-rendering: auto;
}

@media screen and (max-width: 767px) {
  img {
    width: 100%;
  }
}


/*画像--------------------------------------------------*/
.image_100{
  width: 90%;
}
.b_box{
	width: 540px;
	margin: auto;
}
@media screen and (max-width: 767px) {
  .b_box{
	width: 90%;
	margin: auto;
}
}
.b_image_100{
  width: 100%;
}
.b_m{
	padding: 5% 0% 0% 0%;
}
/*--------------------------------------------------*/
h2{
  display: block;
  }
h3{
display: block;
}


/*---------たてゆれ-アニメーション------------------------------------------------------------------*/
.fuwafuwa {
  animation: fuwafuwa 3s linear infinite;
} 

@keyframes fuwafuwa {
0% { transform: translateY(0) }
33.33333% { transform: translateY(10px) }
66.66667% { transform: translateY(0) }
100% { transform: translateY(0) }
}
/*---------きらりんアニメーション---------------------------------------------------------------------*/
.animation2{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
}

.keyframe2{
  animation-name: anim_h;
}

@keyframes anim_h {
  0% {
    transform: translate(0px, 0);
  }
  100% {
    transform: translate(30px, 0);
  }
}

.reflection-img{
  /*width       :100%;*/
  height      :100%;
  position    :relative;
  overflow    :hidden;
}

.reflection {
  height      :100%;
  width       :30px;
  position    :absolute;
  top         :-180px;
  left        :0;
  background-color: #fff;
  opacity     :0;
  transform: rotate(45deg);
  animation: reflection 2s ease-in-out infinite;
  -webkit-transform: rotate(45deg);
  -webkit-animation: reflection 2s ease-in-out infinite;
  -moz-transform: rotate(45deg);
  -moz-animation: reflection 2s ease-in-out infinite;
  -ms-transform: rotate(45deg);
  -ms-animation: reflection 2s ease-in-out infinite;
  -o-transform: rotate(45deg);
  -o-animation: reflection 2s ease-in-out infinite;
  line-height: 0%;
}

@keyframes reflection {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-moz-keyframes reflection {
  0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-ms-keyframes reflection {
  0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection {
  0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}
/*----------------------------PC  header---------------------------*/
.header__wrap {
    max-width: 900px;
    margin: 0 auto;
}
/*----------------------------PC SP footer---------------------------*/
#footer {
        font-size: 15px;
    padding: 15px 0px 15px 0px;
	margin: 25px 0px 0px 0px;
    background-color: #5388d6;
    /* border-top: 1px solid #dbe4f0;*/
	color: #fff;
}

@media screen and (max-width: 767px) {
  #footer {
    padding:5% 5% 5% 5%;
    font-size: 13.5px;
	  font-weight: 400;
  }
}

#footer p {
  line-height: 1.75;
	font-size: 13px;
}

.footer__wrap {
  max-width: 860px;
  margin: 0 auto;
}
.footer_img {
  float: right;
  width: 148px;
}
@media screen and (max-width: 767px) {
  .footer_img {
  float: right;
  width: 50%;
}
}
.copyright {
  display: block;
  margin: 10px 0px 0px 0px;
	  line-height: 1.75;
	font-size: 11px;
}

@media screen and (min-width: 768px) {
  .copyright {
    text-align: center;
  }
}

@media screen and (max-width: 767px) {
  .copyright {
    margin-top: 3.15385vw;
  }
}
/*----------------------------テキストのゆれ　アニメーション--------------------------*/
@keyframes sway22 {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}

.text_yurayura {
  animation: sway22 2s infinite ease-in-out;
  display: inline-block;
}
/*----------------------------テキストのゆれ　アニメーションをやめる--------------------------*/
.text_yurayura_no {
  
  display: inline-block;
}
/*----------------------------ふわっと表示させる記述---------------------------*/
.e {
  opacity: 0;
}
.e-v {
  animation: fadeIn 1s ease forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY( 20px );
  }
  100% {
    opacity: 1;
    transform: translateY( 0 );
  }
}
/*=============================================================================*/
.c_text_in223r {
    display: block;
    text-align: center;
    letter-spacing: 0.22em;
    padding: 0px 0px 0px 0px;
}
.c_text_in223 {
        font-size: 16px;
    background: #3365be;
    color: #fff;
    line-height: 1.0;
    display: block;
    text-align: center;
    /*font-weight: 600;*/
    padding: 3px 0px 2px;
}
/*-------------------------------------------------------------------*/