@charset "Shift-JIS";

/*
================================================================================================================
データ引継ぎ
================================================================================================================
*/

/*背景画像*/
@media screen and (min-width:801px){
#main_contents{background-image:url(../img/handover/main_pc.webp);}}
@media screen and (max-width:800px){
#main_contents{
background-image:url(../img/handover/main_sp.webp);}}

#contents-in {padding:0;}

.con_box .top_space{
position:relative;
width:100%;
max-width:1020px;
background-image:url(../img/handover/box_headbg.webp);
background-repeat:no-repeat;
background-position:bottom center;
background-size:100% auto;
margin:0 auto;
padding-top:50px;}

.con_box .top_space .cat_title {width: 65%;}

.con_box .main_box {
    position:relative;
    width: 91%;
    margin: 0 auto;
    padding: 20px 0;
  background-color: rgba(65, 78, 97, 0.65);
  background-image: 
    repeating-conic-gradient(from 45deg, rgba(50, 66, 89, 0.65) 0% 25%, transparent 0% 50%);
  background-size: 50px 50px;
  background-repeat:repeat;
}

.con_box .main_box::before{
content: "";
position: absolute;
top:0;bottom:0;left:0;
width:20px;
background-image:url(../img/handover/box_bg_border.webp);
background-size:100% auto;
}

.con_box .main_box::after{
content: "";
position: absolute;
top:0;bottom:0;right:0;
width:20px;
background-image:url(../img/handover/box_bg_border.webp);
background-size:100% auto;
}

.con_box .btm {
    width: 94%;
    margin: 0 auto;
    background-image: url(../img/handover/box_btm.webp);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}


#data {margin:0 auto ;}

#intro{
  position:relative;
  width: 100%;
  aspect-ratio: 300 / 65;
  margin-bottom:20px;
}

#intro img{
  display:block;
  position:absolute;
  z-index:10;
  width:115%;
  max-width:1000px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.inner{
width: calc(98% - 40px);
border-radius:10px;
border:3px solid #FFF;
margin: 0 auto;
padding:10px;
background-color: #91eeffa6;
background-image: radial-gradient(circle, #ffffffa6 5px, transparent 5px), radial-gradient(circle, #ffffffa6 5px, transparent 5px);
background-position: 0 0, 15px 30px;
background-size: 30px 60px;
}

.inner .title{width: 65%;max-width:480px;}

.inner table,.inner dl.check{
width:100%;
font: 85% / 1.3 Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica, sans-serif;
line-height:140%;
}
    
.inner table{background-color:#ffffff;color: black;border-collapse: collapse;margin-bottom:30px;}
.inner table th,.inner table td{padding:8px;}
.inner table th{color:#976022;font-weight:bold;background-color:#ecc949;border: 2px solid #000;white-space: nowrap;text-align:center;font-weight:bold;}
.inner table td{border: 2px solid #000;}

.inner table tr td:nth-child(1),
.inner table tr td:nth-child(2){text-align:center;vertical-align: middle;}
.inner table tr td:nth-child(1){white-space: nowrap;background-color:#4993a8;color:#FFF;}

.inner table tr.attention,
.inner table tr.attention td:nth-child(1){font-weight:bold;color:#FF0000;background-color:#fdffb9;}

.inner dl.check{display: grid;grid-template-columns: 65px 1fr;background-color:#fdffb9;border-radius:10px;padding:8px;margin:-15px auto 20px;}
.inner dl.check dt{white-space: nowrap;}
.inner dl.check dd{margin-bottom:5px;}

.inner .notice{width:100%;margin-bottom:20px;}

a#return{
    display:flex;
    justify-content:center;
    align-items:center;
   width:calc(100% - 40px);
   min-height:60px;
   max-width:500px;
   color:#FFF;
   font-weight:bold;
   font-size:105%;
   text-align:center;
    margin: 20px auto;
    border: 3px solid #FFFFFF;
    border-radius: 10px;
    background: linear-gradient(#f988e7 0%, #9f56cb 100%);
    cursor: pointer;
}
a#return br{display:none;}

@media screen and (max-width: 1024px) {
    #intro img{width:110%;}
}
@media screen and (max-width: 900px) {
    #data {width: 100%;}
}
@media screen and (max-width: 639px) {
.con_box .top_space .cat_title{width: 85%;bottom:0;}

.inner table,.inner dl.check{font: 80% / 1.3 Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica, sans-serif;}
.inner table tr td:nth-child(1){white-space:wrap;}
}
@media screen and (max-width:480px){
#intro{margin-bottom:5px;}
.con_box .main_box {background-size: 40px 40px;}
.con_box .main_box::before,
.con_box .main_box::after{width:10px;}
.inner{width: calc(98% - 20px);padding:10px 4px;}
.inner .title{width: 100%;}
.inner .notice{margin-bottom:10px;}
a#return{width: calc(100% - 20px);}
a#return br{display:block;}
}