@charset "UTF-8";

@import url(pc.css) screen and (min-width: 769px);
@import url(sp.css) screen and (max-width: 768px);

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
}

body {
	line-height: 1;
	background: #f7f7f2;
	width: 100%;
	overflow: hidden;
	position: relative;
	font-family: 'Helvetica Neue', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ ProN', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
	text-align: center;
	-webkit-text-size-adjust: none;
    margin:0px;
    
}

html {
  margin: 0 auto;
  background: #f7f7f2; /* Fills the page */
  position: relative; /* Fix for absolute positioning */
  /*border-left:solid 1px #999;*/
  /*border-right:solid 1px #999;*/
overflow-y:scroll;

}


/* --------------------------------------------------------------------------------------------------------------------

common

-------------------------------------------------------------------------------------------------------------------- */

body > header {
	line-height: 0;
}

body > footer {
	color: #fff;
	font-size: 12px;
	padding: 5px 4px;
}
.index{
	text-align:center;
	height:100%;
	padding:0px 0px;
	max-width:780px;
	margin: 0 auto;
}

.index img{
	height: auto;
	display:block;
    margin:0px 0px;
    line-height:0em;
    vertical-align:bottom;
}


/* --------------------------------------------------------------------------------------------------------------------

20220831 add

-------------------------------------------------------------------------------------------------------------------- */
.voice{
	width: 95%;
	margin: 50px auto;
}

.swiper-slide img{
	margin: 0 auto;
	width: 85%;
	max-width: 315px;
}

.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000005'%2F%3E%3C%2Fsvg%3E")!important;
	right: 0!important;
}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000005'%2F%3E%3C%2Fsvg%3E")!important;
	left: 0!important;
}

.swiper-button-next, .swiper-button-prev{
	width: 17px!important;
    height: 34px!important;
    background-size: 17px 34px!important;


.dot-text {
    padding-top: .4em;
    background-position: top left -2px;
    background-repeat: repeat-x;
    background-size: 1.3em .3em;
    background-image: radial-gradient(.15em .15em at center center,orange,orange 100%,transparent);
}
}

.wrapper {
  background: #f8f8ff;
  max-width: 750px;
  margin: 0 auto;
  overflow: hidden;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-weight: 500;
}

#contents {
  position: relative;
  background: #f8f8ff;
  max-width: 750px;
}

.scroll_frame {
	overflow-y: scroll;
    height: min(68vw, 500px);
}

#floating_btn {
        display: none;
        position: fixed;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        z-index: 9999;
        width: 100%;
        max-width: 780px;
        padding: 10px;
        text-align: center;
        filter: drop-shadow(0 5px 5px rgb(0 0 0 / .2));
        box-sizing: border-box;
    
    	img {width: 100%;}
    
        &.is-show {
            display: inline-block;
            opacity: 0;
            animation: fadeIn 2s .2s forwards;
        }
}
    @keyframes fadeIn {
        0% {opacity: 0;}
        100% {opacity: 1;}
    }