@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;700;800&family=Zen+Kaku+Gothic+New:wght@400;700&family=Zen+Maru+Gothic&display=swap');


* {
  box-sizing:border-box;
}


body{
font-size:16px;
line-height:1.6;
font-family:'Zen Kaku Gothic New', sans-serif,"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo; margin:0;
padding:0;
background: #fff;

}


a {
  text-decoration: none;
  color: #666; transition: all 300ms 0s ease;
}

a:hover{position:relative;
top:1px;
}



.pc{display: block;}
.smp{display: none;}


@media (max-width: 480px){
.smp{display: block;}
 body{font-size:14px;}
}



section,article{margin:0;　padding:0; display: block;}
h1,h2,h3,h4,h5,h6{margin:0; padding:0;}

.wapper{display: flex;
  flex-direction:column;
  min-height: 100vh;
  text-align: center;
}

.searchbox{
  margin: auto;
    width:calc(100% - 20px);
    max-width:680px;
}

.searchbox h1{display: block; 
    width:calc(100% - 60px);
max-width:600px;
margin:30px auto;}

/*****/

path {
    fill: none;
    stroke: #000;
    stroke-dasharray: 2000;
    stroke-dashoffset: 0;
    stroke-width: 1.5;
    -webkit-animation: logo 3s ease-in forwards;
    animation: logo 3s ease-in forwards;
}

@-webkit-keyframes logo {
0% {
    stroke-dashoffset: 2000;
    fill:transparent;
}
50% {
    fill:transparent;
}
100% {
    stroke-dashoffset: 0;
}
}

@keyframes logo {
0% {
    stroke-dashoffset: 2000;
    fill:transparent;
}
50% {
    fill:transparent;
}
100% {
    stroke-dashoffset: 0;
}
}

/*****/


/*フォーム全体を中央へ*/
.searchbox #form{
  display: flex;
  justify-content: center;
  height:60px;
   box-shadow: 0px 0px 6px 2px #c2c2c2 ;
  -webkit-box-shadow: 0px 0px 6px 2px #c2c2c2 ;
  border-radius:30px;
}
/*入力フォーム*/
.searchbox #box{
   width:calc(100% - 6em);
  padding:0 15px;
  border-radius:30px 0 0 30px;
  background:#fff;
  border:none;
  outline:0;   font-size:1em;
}



#box::placeholder{
    color: #999; 
}

.searchbox #box:focus {
  background: #F0F8FF;
  color: #D82A21;
}

.searchbox #box:focus::placeholder {
  color: #2F44C1;
}



/*検索ボタン*/
.searchbox #btn{
  width:6em;
  border-radius:0 30px 30px 0;
  background:#666;
  border:none;
  color:#fff;
  font-size:1em;
padding-top:1em;
  cursor: pointer;
}




#btn:hover{
background: #d82a21;
position:relative;
top:0;
}

/* HTML: <div class="tooltip">This is a Speech Bubble with a solid coloration and with border radius </div> */
.tooltip {
  color: #fff;
  font-size: 0.7em;
  max-width: 32ch;
  text-align: center;
  margin:2em 0 0 calc(100% - 36ch);
}
.tooltip {
  /* triangle dimension */
  --b: 1em; /* base */
  --h: 1em; /* height */

  --p: 70%; /* triangle position (0%:left 100%:right) */
  --r: 1.2em; /* the radius */
  --c: #D82A21;

  padding: 1em;
  border-radius: min(var(--r),var(--p) - var(--b)/2) min(var(--r),100% - var(--p) - var(--b)/2) var(--r) var(--r)/var(--r);
  clip-path: polygon(0 0,0 100%,100% 100%,100% 0,
    min(100%,var(--p) + var(--b)/2) 0,
    var(--p) calc(-1*var(--h)),
    max(0%  ,var(--p) - var(--b)/2) 0);
  background: var(--c);
  border-image: conic-gradient(var(--c) 0 0) fill 0/
    0 calc(100% - var(--p) - var(--b)/2) var(--r) calc(var(--p) - var(--b)/2)/
    var(--h) 0 0 0;
}


/* NEWS */

#news{margin:0; padding:0; background-image: linear-gradient(0deg, rgba(234, 234, 255, 1), rgba(196, 196, 255, 1));
}



#news .wapper{animation: fadeIn 5s ease 0s 1 normal;
    -webkit-animation: fadeIn 5s ease 0s 1 normal;
    } 

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

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


.newimg{display: block; margin:0 auto; width:100%; max-width:800px; height:auto;}


.copyright{text-align: center; font-size:12px; margin-top:3em;}

/*　footer　*/

footer {
color:#999;
 margin-top: auto;
padding: 20px 0 10px 0;
}

footer .footer__copy {
    text-align: center;
    font-size: 12px;
    margin-top:40px;
}

footer .footer_link {
    margin: 10px 0;
}

footer .footer_link ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-left: -10px;
}

footer .footer_link ul li {
    list-style: none;

}

footer .footer_link ul li a {
  color: #9eb2cd;
}

footer .footer_link ul li:not(:first-child)::before {
    content: "｜"; 
    margin:0 1rem;
}

.share-button{display: flex;
    justify-content: center;
    margin:2rem auto;
    background: transparent;
}

.caption{font-size:12px; text-align: center;}

.attention{font-size:0.8em; margin:10px 20px; text-align: left; 
text-indent: -1em; padding-left:1em;}