@charset "UTF-8";
/* CSS Document */

/* ========================= [ base ] */

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td {
margin: 0 auto;
padding: 0;
overflow-x: hidden;
overflow: visible;
}

ul,
ol,
dl {
list-style: none;
}

img {
vertical-align:top;
}

body {
text-align: center;
font-family: メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
-webkit-text-size-adjust:100%;
overflow-x: hidden;
}


a,a:hover,a:visited{
    color: inherit;
	cursor: pointer;
	text-decoration: none;
}


button{
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}

*,
::before,
::after {
  background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
  box-sizing: inherit;
}

::before,
::after {
  text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
  vertical-align: inherit;
}

* {
  padding: 0; /* Reset `padding` and `margin` of all elements */
  margin: 0;
}






#dmm_ntgnavi {
    background: url(../images/bg_navimain.gif) center center repeat-x #FFFFFF;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    font-size: 12px;
    font-family: 'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', Verdana, sans-serif;
    display: flex;
    justify-content: space-between;
	
}

#dmm_ntgnavi ul {
    list-style: none;
    margin: 2px 0;
    padding: 0;
    display: flex;
    width: 50%;
}

#dmm_ntgnavi ul li {
    margin: 0 6px 0 0;
    line-height: 15px;
}

#dmm_ntgnavi .navi_left li > a {
    display: block;
    padding: 0 3px 0 8px;
    text-decoration: none;
    border: 1px solid #eee;
    border-radius: 3px;
}

#dmm_ntgnavi .navi_left li > a:hover {
    background: #eee;
    border: 1px solid #666;
    border-radius: 3px;
}

#dmm_ntgnavi .navi_left li > a span {
    display: block;
    padding: 9px 10px 7px 28px;
    color: #333;
    font-weight: bold;
}

#dmm_ntgnavi .navi_left li.dmm_top img {
    margin: 8px 5px 8px 0
}

#dmm_ntgnavi .navi_left li.ntg_top {
    margin-left: 10px;
}

#dmm_ntgnavi .navi_left li.ntg_top span {
    background: url(../images/bg_bt_olgtop.gif) 0 center no-repeat;
}

#dmm_ntgnavi .navi_right {
    justify-content: flex-end;
    font-size: 10px;
}

#dmm_ntgnavi .navi_right li {
    margin: 0 10px 0 0;
    padding: 8px 5px;
}

#dmm_ntgnavi .arrow {
    padding-left: 14px;
    background: url(../images/arrow_common.gif) no-repeat left center;
}

#dmm_ntgnavi .tx-point {
    font-size: 16px;
    font-weight: bold;
    color: #ff4b4b !important;
}

#dmm_ntgnavi p {
    margin: 0;
    line-height: 2.6em;
}

#dmm_ntgnavi .clear {
    clear: both;
}


	
#data_link {
margin:50px auto 0px auto;
width:100%;
height:auto;			
position:relative;
overflow: visible;
overflow-x: hidden;
overflow-y: hidden;
}
	
	
#data_link .data_link_box{
margin:0px 0px 0px 0px;
height:2329px;
background: url("../images/policy_bg.webp") no-repeat center;	
position: relative;
z-index:10;
color:#3c3c3c;
letter-spacing:1px;
}
		
#data_link .data_link_box .capt01{
margin:100px 0px 0px 20px;
}

#data_link .data_link_box h2{
margin:20px auto 5px auto;
font-size:20px;
}

#data_link .data_link_box .data_link_text{
margin:40px auto 0px auto;	
padding:0px 50px 0px 18px;
left:20px;
width:1000px;
height:2000px;
position: relative;
text-align: left;
align-items: center;
overflow-y:auto;
}

/*データ連携用*/
#data_link .data_tx01{
margin:30px auto 0px auto;
color: #f660aa;
font-size:21px;
font-weight:bold;
letter-spacing: 1px;
line-height:30px;
}

#data_link .data_tx02{
margin:40px auto 0px auto;
font-size:17px;
}


#data_link .data_link_box .capt02{
margin:50px 0px 30px 70px;	

}


#data_link .data_link_box .explanation_txt{
margin:0px 0px 0px 60px;	
font-size:17px;
}


#data_link .data_link_box .pic01{
margin:20px 0px 20px 150px;
}

#data_link .data_link_box .pic02{
margin:20px 0px 20px 200px;
}

#data_link .data_link_box .explanation_txt02{
margin:0px 0px 0px 60px;	
font-size:15px;
}


#data_link .data_link_box .explanation_txt03{
margin:0px 0px 30px 60px;	
font-size:15px;
}


#data_link .data_link_box .pic02{
margin:20px 0px 20px 200px;
}


#data_link .data_link_box .pic03{
margin:20px 0px 20px 90px;
}

#data_link .data_link_box .pic04{
margin:20px 0px 20px 10px;
}


@media (max-width: 600px) {
	
#data_link .data_link_box{
margin:0% 0% 0% -0.5%;
padding:0% 0% 15% 0%;
width:100%;
height:auto;
background: url("../images/policy_bg_sp.webp") no-repeat top center;
background-size:contain;
}	
		
	
		
#data_link .data_link_box .capt01{
margin:10% 0% 0% 3%;
width:100%;
}	
	
	
#data_link  .data_link_box .data_link_text{
margin:6% 0% 5% 3%;
padding:0% 2% 0% 0%;
width:88%;
height:375vw;
position: relative;
overflow-y: scroll;
z-index:10;

}
	

/*データ連携用*/
#data_link .data_tx01{
margin:1% auto 0% auto;
color: #f660aa;
font-size:4vw;
font-weight:bold;
letter-spacing: 1px;
line-height:5vw;
}
	
	
#data_link .data_tx02{
margin:5% auto 5% auto;
font-size:2.7vw;
}
	
	

#data_link .data_tx03{
margin:2% auto 2% auto;
font-size:2.7vw;
}

#data_link .data_tx04{
margin:2% auto 0% auto;
font-size:2.7vw;
}
	
	

	
	
#data_link .data_link_box .capt02{
margin:10% 0% 5% 1%;
width:98%;
}

#data_link .data_link_box .explanation_txt{
margin:0% 0% 0% 0%;
font-size:2.75vw;
}
		
#data_link .data_link_box .pic01{
margin:5% 0% 5% 3%;
width:95%;
height:auto;
}	
	
#data_link .data_link_box .pic02{
margin:5% 0% 5% 3%;
width:95%;
height:auto;
}
	
#data_link .data_link_box .explanation_txt02{
margin:0% 0% 0% 0%;
font-size:2.5vw;
}
	
#data_link .data_link_box .explanation_txt03{
margin:0% 0% 5% 0%;
font-size:2.3vw;
}
	
	
#data_link .data_link_box .pic03{
margin:5% 0% 5% 3%;
width:95%;
height:auto;
}	

#data_link .data_link_box .pic04{
margin:0% 0% 5% 3%;
width:95%;
height:auto;
}	

	

	}





	
 /* 背景 */	
	
#background-container {
	margin:0 auto 0 auto;
    position: relative;
    height:auto; /* 背景画像が切り替わるように長いページを作成 */
	 z-index:-1;
}
	
	
	
#background-container::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 1));
  pointer-events: none; /* マスクによる影響を無視 */
  z-index:1;
}	

	
	
	
.floating-button {
    position: fixed;
    top: 10%;
    right: 0px; /* 初期位置は画面外 */
    transform: translateY(-50%);
    transition: right 0.5s ease-in-out;
	z-index:11;
}

.floating-button img {
    width: 65px;
    height: 160px;
}
	

	
#page_btn {
    position: fixed;
    right: 20px;
    bottom: 0;
    z-index: 100;
}
	
	
#page_btn:hover{
filter: brightness(120%);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;	
}	
	
	
	

.bg-image {
	margin:0 auto 0 auto;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-position: center;
	background-size: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
	z-index:-1;
	
}
	
	
.bg-image::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 13%, rgba(255, 255, 255, 0) 87%, rgba(255, 255, 255, 1));
  pointer-events: none; /* マスクによる影響を無視 */
  z-index:1;
}	
	


.bg-image.active {
    opacity: 1;
    transform: scale(1);
}

.bg-image.fade-out {
    opacity: 0;
    transform: scale(1.1); 
}

#wing {
    position: fixed; /* 固定表示に変更 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none; /* 羽が他の要素に影響しないようにする */
}

.feather {
    position: absolute;
    width: 50px;
    height: 50px;
    background-size: cover;
    opacity: 0;
    transition: opacity 2s;
    animation: fall linear infinite, sway ease-in-out infinite;
}

@keyframes fall {
    to {
        transform: translateY(100vh) translateX(calc(-50px + 100vw)); /* 最大サイズに調整 */
    }
}

@keyframes sway {
    0%, 100% {
        transform:  rotate(10deg);
    }
    50% {
        transform:  rotate(-10deg); /* X軸の揺れ幅を調整 */
    }