@charset "UTF-8";
/* ================================================
reset
================================================ */
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*::before, *::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

html::-webkit-scrollbar {
  width: 10px;
  background: #666;
}

html::-webkit-scrollbar-thumb {
  background: #fff;
}

body, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li {
  margin: 0;
  padding: 0;
  font-size: inherit;
}

header, nav, footer, section {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-transition: .2s;
  transition: .2s;
}

img {
  border: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

video {
  border: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}






/* var color */
:root {
  --bg-color: #ddd;
  --base-color: #a6862f;
  --main-color: #8E2023;
  --accent-color: #9f0b0b;
  --acce-d-color: #5f0303;
  --side-nav-color:#c25050;
  --container-width: auto;
  --headline-lineheight: 1.4;
  --base-lineheight: 1.7;
  --point-color:  #c50000;
}





/* ================================================
web font
================================================ */

/* Noto Serif Japanese 900 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');


/* ================================================
rem
================================================ */
html {
  font-size: 625%;
}

@media (min-width: 751px) and (max-width: 750px) {
  html {
    font-size: calc(100vw / 12.8);
  }
}


@media (min-width: 751px) and (max-width: 1000px) {
  html {
    font-size: calc(100vw / 9.8);
  }
}


.sp_only{display: none;}


@media (max-width: 750px) {
  html {
    font-size: calc(100vw / 7.67);
  }

.pc_only{display: none;}
.sp_only{display: block;}
}

/* ================================================
text-shadow
================================================ */


/* ================================================
portal
================================================ */

.portal{
	height: 100%;
	line-height: 1.6;
	background: url(../img/common/portal_bg.jpg) no-repeat #fdf8ec center top;
  background-size:120%;
	font-family: -apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Meiryo UI',Meiryo,sans-serif;
	font-size: .18rem;}

.portal h1.portal_logo{    
  width: 50%;
    max-width: 496px;
    margin:1% auto 0%;
    padding-bottom: 0;
}
.portal h2.portal_title{
  width:50%;
  max-width: 779px;
  margin: -1% auto 0;
  background: none;
}
.portal ul.portal_btn{
  width:80%;
  max-width:1200px;
  margin:2% auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.portal ul.portal_btn li {
    width: 30%;
    margin: 1%;
    }
.portal ul.portal_btn li a{
    width: 100%;
    padding: 2% 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 1.1em;
    font-weight: 500;
    background: #fff;
    color: #00a0c8;
    cursor: pointer;
    border-radius: 10px;
    border: 4px solid #b5d9df;
    outline: #00a0c8 solid 3px;
    transition: transform .5s, filter .5s;
    line-height: 1.4;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}

.portal ul.portal_btn li a:hover {
    filter: brightness(1.3);
}


.portal footer p
 {
    font-size: 13px;
    color: #4e454a;
    text-align: center;
}


@media (max-width: 750px) {
.portal{background-size:150%;}


.portal h1.portal_logo{
  width:80%;
  margin: 7% auto 3%;
}
.portal h2.portal_title{
  width:90%;
  margin: -1% auto 6%;
}

.portal ul.portal_btn{
    width:100%;
    }
.portal ul.portal_btn li {
    margin: 2%;
    width:40%;
    }
.portal ul.portal_btn li a{
      font-size: 1.5em;
    }

}


/* ================================================
layout
================================================ */

body {
	height: 100%;
	line-height: 1.6;
	background: url(../img/common/bg.jpg) no-repeat #5bc8dc;
	font-family:"Zen Maru Gothic", sans-serif;
	font-size: .18rem;
  background-size: contain;
  background-attachment: fixed;
}

@media (max-width: 750px) {
  body {
    font-size: .24rem;
  }
}

.wrapper {
  margin: 0 auto;
  position: relative;
  width: 100%;
  max-width: 1200px;
  box-shadow: 0 0 25px rgb(0, 0, 0, 15%);
}

@media (min-width: 751px) {
  .wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.contents {/*bodyの背景色*/
  margin: 0 auto;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  color: #484848;  
  position: relative;
  background: url(../img/common/bg_header.jpg) #fff;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;
  z-index: 1;
}

@media (min-width: 751px) {
  .contents {
    margin: 0 0 0 auto;
    padding: .25rem/*.3rem*/ .5rem;
    width: calc(100% - 240px);
  }
}

@media (max-width: 750px) {
  .contents {
    padding: 1.4rem .3rem;
  }
}

.sidebar {
  -webkit-box-shadow: 0 0 0.1rem 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 0.1rem 0 rgba(0, 0, 0, 0.2);
  position: fixed;
  z-index: 50;
  width: 100%;

        
  background-size: cover;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
	background:#fcf8eb;
}

.sidebar::-webkit-scrollbar {
  display: none;
}

@media (min-width: 751px) {
  .sidebar {
    width: 240px;
    height: 100%;
  }
}

.sidebar .qr {
  margin: 26px 0 0 0;
  color: #54451f;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
}

@media (max-width: 750px) {
  .sidebar .qr {
    display: none;
  }
}

.sidebar .qr img {
  margin: 0 0 20px 0;
  width: 82px;
}

/* ================================================
lang
================================================ */

.lang_list{
  width: 90%;
  margin: auto;
    background: #d1e5e8;
  border-radius: 0.1rem;
  margin-bottom: 0.1rem;
}
.lang_head{
  display: flex;
  align-items: center;
  justify-content:center;
  gap:0.1rem;
  font-size: 0.15rem;
  color:#fff;
  padding:0.1rem;
  cursor: pointer;
}

.lang_head img{
  width: 0.2rem;
  min-width: 0.2rem;
  height: auto;
  margin-left: -0.1rem;
}
.lang_list dd{
  display: none;
  padding:0.1rem 0;
}
.lang_list{
  color:#fff;
}
.lang_item{
  font-size: 0.15rem;
  line-height: 1;
  display: block;
  padding:0.12rem 0.5rem;
  text-align: center;
}
.lang_item:hover{
  color:rgb(214, 8, 8);
  background-color: #1a1212;
}

@media (max-width: 750px) {
  .lang_list{
    display: none;
    width: 100%;
    margin-bottom: 0;
  }
  .lang_head{
    display: none;
  }
  .lang_list dd{
    display: block;
  }
  .lang_item{
    font-size: 0.3rem;
    padding:0.3rem 0.5rem;
  }
}


/* ================================================
nav
================================================ */
nav {
  line-height: 1;
  text-align: center;
  letter-spacing: .02em;
}

@media (min-width: 751px) {
  nav {
    /*padding: 10px;*/
    border-bottom: 4px solid #00a0c8;
    display: block !important;
     font-size: .15rem; 
  }
}

@media (max-width: 750px) {
  nav {
    padding: .1rem;
    display: none;
/*    background: #211D12;*/
    font-weight: bold;
    font-size: .3rem;
  }
}


nav dl,nav ul{margin: 0 0 0 0;}


nav dt {
	color:#fff;
	cursor: pointer;
	-webkit-transition: .2s;
	transition: .2s;
	cursor:pointer;
	border-bottom:1px solid #90c7d0;
	background: #00a0c8;
	background-repeat: repeat-x;
  background-image: url(../img/common/btn_dec01.png);
  background-size: cover;
}

nav dt a {
  pointer-events: none;
	margin:0;
	color:#fff;
	text-decoration:none;
	display:block;
}


nav dt a.enable_link    { pointer-events: auto; }


nav dt:hover {

  filter: brightness(1.3);
  color:#fff;
}

nav dt:hover a.enable_link {

  color:#fff;
}



nav dd {
  display: none;
 background: rgb(245,243,239);
}


nav dd a.current {/*navの現在p*/
	  background:#fbe168;
}

@media (max-width: 750px) {
  nav dd a.current {
  }
}

nav dd a:hover {/*使用中*/
  color: #e75d58;
}

nav a {
  padding: 1em 0;
  display: block;
}

nav dd ul li{
	width: 100%;
	border-bottom: 1px #D0CCDA/*#f2e3c6*/ solid;
	margin:0 1em 0em 0;
}
nav dd ul li:last-child{
border-bottom: none;
}


/* ================================================
header
================================================ */
@media (max-width: 750px) {
  header {
    padding: 0 .8rem 0 .3rem;
    -webkit-box-shadow: 0 0 0.1rem 0 rgba(0, 0, 0, 0.7);
            box-shadow: 0 0 0.1rem 0 rgba(0, 0, 0, 0.7);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    justify-content: space-between;
    position: relative;
    height: .8rem;        
    background: #01a0c8;
  }
}

header a {
  line-height: 1.2;
  font-weight: bold;
}

header a:hover {
  color: #e75d58
}

/*
@media (min-width: 751px) {
  header a {
    padding: 20px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 190px;
    font-size: 16px;
    background: url("../../rax1/jp/img/logo.png") no-repeat center 14px/212px;
    color: #01a0c8;
    
  }
  header a.ryza2_logo {
    background: url("../../rbw2/jp/img/logo.png") no-repeat center 14px/212px;
  }
  header a.ryza3_logo {
    background: url("../../rcs3/jp/img/logo.png") no-repeat center 14px/212px;
  }
}
*/
header a span {
  display: none;
}

@media (max-width: 750px) {
  header a {
    color: #fff;
  }
  header a span {
    display: block;
  }
}
/*
header .home_icon    { width: 8.5%; margin-right: 0.5em;margin-bottom: 0.2em; }
header .home_icon img   { max-width: 50px; }
*/
header .lang_icon{
  position: absolute;
  width: 0.48rem;
  right: 0.9rem/*1.7rem*/;
}

header .toggle {
  position: absolute;
  top: .1rem;
  right: .1rem;
  width: .6rem;
  height: .6rem;
  background-color: #fff;
  cursor: pointer;
}

@media (min-width: 751px) {
/*  header .home_icon,*/
  header .lang_icon,
  header .toggle {
    display: none;
  }
}

header .toggle.open span {
  background: none;
}

header .toggle.open span::before {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

header .toggle.open span::after {
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}

header .toggle span {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: .4rem;
  height: .02rem;
  background: #01a0c8;
  -webkit-transition: .2s;
  transition: .2s;
}

header .toggle span::before, header .toggle span::after {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: .02rem;
  content: '';
  background:#01a0c8;
  -webkit-transition: .2s;
  transition: .2s;
}

header .toggle span::before {
  -webkit-transform: translateY(-0.08rem);
          transform: translateY(-0.08rem);
}

header .toggle span::after {
  -webkit-transform: translateY(0.08rem);
          transform: translateY(0.08rem);
}
.lang_list{
  width: 90%;
  cursor: pointer;
  margin: auto;
  margin-bottom: 1em;
}
.lang_head{    
  padding: 5% 0;
    width: 100%;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 1.1em;
    font-weight: 500;
    background: #fff;
    color: #00a0c8;
    cursor: pointer;
    border-radius: 10px;
    border: 4px solid #b5d9df;
    outline: #00a0c8 solid 3px;
    line-height: 1.4;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
  display: flex;
  align-items: center;    
  transition: .2s;
}
.lang_head:hover{
    filter: brightness(1.3);
}

.lang_head img{
  width: 0.2rem;
  min-width: 0.2rem;
  height: auto;
  margin-left: -0.1rem;
}
.lang_list dd{
  display: none;
  padding:0.1rem 0;
    background: #d1e5e8;
    color: #01a0c8;
}
.lang_list{
  color:#fff;
}
.lang_item{
  font-size: 0.15rem;
  line-height: 1;
  display: block;
  padding:0.12rem 0.5rem;
  text-align: center;
}
.lang_item:hover{
  color:#848484;
  background-color: #fbe168;
}

@media (max-width: 750px) {
  .lang_list{
    display: none;
    width: 100%;
    margin-bottom: 0;
  }
  .lang_head{
    display: none;
  }
  .lang_list dd{
    display: block;
  }
  .lang_item{
    font-size: 0.3rem;
    padding:0.3rem 0.5rem;
  }
}

/* ================================================
main
================================================ */
main section {
  margin: -.3rem 0 .5rem 0;
  padding: .3rem 0 0 0;
}

/* section no spacing */
.title-menu, .controller, .main-menu, .secret-key  {
  margin: inherit;
    margin: 0;
  padding: 0;
}
/* @media (max-width: 750px) {
  main section {
    margin-top: -1.1rem;
    padding-top: 1.1rem;
  }
} */

main section:last-child {
  margin-bottom: 0;
}

@media (min-width: 751px) {/*最初のh2の前のあきつめ*/
main section:first-child {
  margin-bottom: 0;
}
}
main section:first-child p:last-child {
  margin-bottom: .45rem;
}


main .sec {
  margin: 0 0 2em 0;
}

main .sec:last-child {
  margin-bottom: 0;
}
main .w80 {
  margin: 1em auto;
  width: 80%;
}

@media (max-width: 750px) {
  main .w80 {
    width: 90%;
  }
}

main p {
  margin: 0 0 .2em 0;
}

main p:last-child {
  margin-bottom: 0;
}

main p img {
  margin: 0 .5em 0 0.5em;
}
main h4 img.icon {/*4100*/
    height: 1.25em;
    width: auto;
  margin: 0 .5em 0 0.5em;
}

main p img, main dl img, main ul img {
  width: auto;
  height: 1.5em;
}
main .disc{padding:1% 0 2% 0;}
main .disc li {
  margin: 0.5em 0 0 1.5em;
  list-style: disc outside;
}

main .reference, main .reference_list li {/*注釈*/
  padding: 0 0 0 4em;
  color: #222222;
  font-size: .12rem;
  text-indent: -1em;
}

@media (max-width: 750px) {
  main .reference, main .reference_list li {
    padding: 0 0 0 1.75em;
    font-size: .2rem;
  }
}

main .reference::before, main .reference_list li::before {
  margin: 0 .2em 0 0;
  content: '-';
  font-family: ‘Hiragino Kaku Gothic ProN’,’ヒラギノ角ゴ ProN W3′,’Meiryo UI’,Meiryo,sans-serif;
}



/*================================================
 *  hover効果
 ================================================*/

.image:hover{filter: brightness(130%);}


.center{
	text-align: center;
	margin: 0 auto;
	clear: both;
}

/* ================================================
link
================================================ */
main + .pagination {
  margin: .5rem 0 0 0;
}

.pagination {
  margin: 0 0 .2rem 0;
  line-height: 1;
}

.pagination li {
  display: inline-block;
	margin-left:0.2em;
  margin-bottom: 0;
}

.pagination li.prev {
  margin: 0 0 0 .15rem;
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
}



@media (max-width: 750px) {
  .pagination li + li {
    margin: 0 0 0 .2rem;
  }
}

.pagination a {
  display: block;
  width: .5rem;
  height: .5rem;
}
.pagination a.next {
  background: url("../../assets/img/common/next.png") no-repeat center/100%;
  -webkit-transition: none;
  transition: none;
}
.pagination a.prev {
  background: url("../../assets/img/common/back.png") no-repeat center/100%;
  -webkit-transition: none;
  transition: none;
}

@media (max-width: 750px) {
  .pagination a {
    width: 1rem;
    height: 1rem;
  }
}
.pagination a:hover {
  opacity:0.65;
}





/* ================================================
ph
================================================ */
/*　.ph　2505確認未使用
.ph {
  margin: 1em auto;
  border: solid .01rem #F1F6D5;
}

.ph.controller {
  border: none;
}
*/

.licence_oya {
	margin-top: 2em;
	padding: 1em 1em 1em 0em;
	background-color:#fff;
}

.licence li{
	margin-bottom: 0.8em;
	font-size: .16rem;
}

.licence li img{
	font-size: .1rem;
}


/* ================================================
flexbox
================================================ */

/* ================================================
本文用flex
================================================ */

/* ================================================
本文用flex こっちが元の
================================================ */

.flexbox_ph {
  margin: 1em 0;
}

@media (max-width: 750px) {
  .flexbox_ph {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	flex-direction: column;
	  position: relative;
  }
}
.flexbox_ph img{
  padding: 2%;
  background-color: #b5d9df;
}

.btn img{
  display: inline-block!important;
  width: auto!important;
  height: 1.35em;
  margin-top: 0!important;
  margin-bottom: 0!important;
  padding: 0;
}
.btn_big img{
  width: auto!important;
  height: 2em;
}


/*スマホ*/
@media (max-width: 750px) {
  .flexbox_ph img {
		display   : block;
    margin: 0.5em 2% 1em 2%;
    width: 96%;
  }
}
@media (max-width: 750px) {
    .flexbox_ph p {
		display   : block;
    margin-left: 2%;
    margin-right: 2%;
    width: 96%;
    }
  }

@media (max-width: 750px) {/*横並び画面説明文内のアイコンなどが横100％になるのを避ける*/
  .flexbox_ph img.btn {
    width: auto;
    height: 1.25em;
	display   : inline-block;
	margin: 0 0.2em;  
  }
  }



/*PC 751以上*/
@media (min-width: 751px) {
    .flexbox_ph p {
/*	display   : block;*/
	width:100%;
		margin:0 1em 0.2em auto;
/*		margin:0 0 0 auto;*/
	}
  }
@media (min-width: 751px) {
    .flexbox_ph div.flex_txt {
	width: 100%;
	margin:0 1em 0 0;
	}
  }

@media (min-width: 751px) {
  .flexbox_ph div {
	display   : block;
	width:70%;
/*	  margin-left: 1em;*/
 		margin:0 0 0 auto;

  }
 }

@media (min-width: 751px) {
  .flexbox_ph div.aki_lr {/*R3にある*/
    margin: 0 1em 0 1em;
  }
 }



@media (min-width: 751px) {
  .flexbox_ph {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 98%;
    margin: 0 1%;
	flex-direction: row-reverse;
  }
}

/* ================================================
R1 7200　phキャプション+アイコン
================================================ */


img.with_cap {/*photoとcapのアキを詰める*/
    margin-bottom: inherit;
    margin-bottom: 0;
}


p.with_cap {
    text-align:center;
}

img.kakudai{
        height: 3em;
	width: 3em;
    background-color: inherit;
     display: inline-block;
    margin:0;
	}


/*================================================
 *  左テキスト右写真、スマホ切り替えなし
 ================================================*/

.block_50 {
	display: inline-block;
	width: 48%;
	vertical-align: text-top;
	margin: 0% 1%;
}


/* ================================================
コラム用flex 使用
================================================ */

.flexbox_column_ph {/*R3にある*/
  /* margin: 1em 0; */
}

@media (max-width: 750px) {
  .flexbox_column_ph {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	flex-direction: column;
  }
}
/*スマホ*/
@media (max-width: 750px) {
  .flexbox_column_ph img {
		display   : block;
    margin: 0 0 1em 0;
    width: 100%;
  }
 }
@media (max-width: 750px) {
    .flexbox_column_ph p {
		display   : block;
    width: 100%;
    }
  }



/*PC 751以上*/
@media (min-width: 751px) {
    .flexbox_column_ph p {
		display   : block;
		width: 100%;
	}
  }

@media (min-width: 751px) {
  .flexbox_column_ph div {
	display   : block;
	width:70%;
	  margin-top: 0.5em;
  }
 }


@media (min-width: 751px) {
  .flexbox_column_ph {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    gap:0.08rem;
  }
}




/*------------------------------------
pagejump
------------------------------------*/


.pagejump {
  margin: 0 auto 5% auto;
  display: flex;
  text-align: center;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
  justify-content: center;
}

@media (max-width: 750px) {
  .pagejump {
    font-size: .24rem;
  }
}

main .pagejump li {
  margin: 0 0.5em 0 0.5em;

  width: 45%;
  text-align: center;
  text-indent: 0;
  outline-offset: -4px;

  min-height: 3em;
}

main .pagejump li.ex_w  { width: 14em; }


main .pagejump.short li   { width: 8.5em; }


.pagejump li:last-child { }


.pagejump li a{
  width: 100%;
  padding: 5% 0;
  width: 100%;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 1.1em;
    font-weight: 500;
    background: #fff;
    color: #00a0c8;
    cursor: pointer;
    border-radius: 10px;
    border: 4px solid #b5d9df;
    outline: #00a0c8 solid 3px;
    transition: transform .5s, filter .5s;
    margin-top: 1em;
    line-height: 1.4;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}

@media (max-width: 750px) {
  .pagejump li {
    margin: 1%;
    width: 47%;
    transition : 0.5s;
  }
}

.pagejump a {
  padding: 0;
  position: relative;
  color: #00a0c8;
  transition: .2s;
}

.pagejump li a:hover {
    filter: brightness(1.3);
}


/*------------------------------------
pagelink 参照p
------------------------------------*/

.pagelink {
  margin: 0 auto .5rem auto;
	position: relative;
}

@media (max-width: 750px) {
  .pagelink {
    font-size: .24rem;
  }
}
.pagelink li {
	display: block;
	 padding: 0 0 0 -0.25em;
	margin: 0em;
/*	border: 1px pink solid;*/
}

.pagelink li a::before {
  left: -0.5em;
  width: 1.8em;
  height: 0.9em;
  content: '';
  background: url(../../assets/img/common/link_arrow.png) no-repeat center / 100%;
  display: inline-block;
  vertical-align: middle;
  color: #00a0c8;
  background-size: contain;
}

.pagelink a {
  color: #00a0c8;
  text-decoration:underline;
	
}


.pagelink a:hover{
  color: #e75d58;
	
}



/* ================================================
footer
================================================ */
footer {
  margin: .2rem 0 0 0;
}

footer .copyright {
  font-size: .12rem;
  text-align: center;
  letter-spacing: .05em;
}

@media (max-width: 750px) {
  footer .copyright {
    font-size: .2rem;
  }
}

footer .pagetop {
  display: block;
  position: fixed;
  right: .3rem;
  bottom: .3rem;
  z-index: 10;
  width: .5rem;
  height: .5rem;
  content: '';
  background: url("../../assets/img/common/totop.png") no-repeat center/100%;
}

@media (max-width: 750px) {
  footer .pagetop {
    width: 1.0rem;
    height: 1.0rem;
  }
}

footer .pagetop:hover {
  filter: brightness(1.3);
  opacity: 1.0;
}

/* ================================================
TOP
================================================ */
.top {
}

@media (min-width: 751px) {
  .top {
    padding: 0 .3rem .3rem .3rem;
  }
}

@media (max-width: 750px) {
  .top {
    padding-top: .8rem;
  }
}

.top .mv {
  margin: 0 -.3rem;
}

@media (max-width: 750px) {
  .top .mv {
    height: auto;
  }
}

.top p, .top dl, .top ul {
  text-shadow: none;
}

.top .link {
  margin: 2em 0;
  line-height: 1;
  font-weight: bold;
}

@media (min-width: 751px) {
  .top .link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: .17rem;
  }
  @supports (display: grid) {
    .top .link {
      display: -ms-grid;
      display: grid;
      gap: .1rem;
      -ms-grid-columns: 1fr 1fr ;
          grid-template-columns: 1fr 1fr;
    }
  }
}

@media (min-width: 751px) {
  .top .link .col {
    width: calc(100% / 2);
  }
  @supports (display: grid) {
    .top .link .col {
      width: auto;
    }
  }
}

@media (max-width: 750px) {
  .top .link .col {
    margin: 0 0 2em 0;
  }
  .top .link .col:last-child {
    margin-bottom: 0;
  }
}

.top .link dl {/*top目次リンク*/
  margin: 0 0 2em 0;
  padding: 0 0 0 1.5em;
}

@media (max-width:750px) {
  .top .link dl {/*top目次リンク*/
    padding: 0em;
  }
}

.top .link dl:last-child {
  margin-bottom: 0;
}

.top .link dt {/*top目次リンク　項目名　見出し*/
  margin: 1em 0 1em 0;
  padding:0.8em 0.8em;
  font-size: 1.1em;
  color: #fff;
  border-bottom: solid 4px #fbe168;
  background:#01a0c8;

}
.top .link dt.hihyoji {/**/
  border: none;
    height: 2em;

}
@media (max-width: 750px) {
.top .link dt.hihyoji {/**/
    display: none;
  }
}



.top .link li {
  margin: 0 0 1em 0.5em;
  text-indent: 0;
  padding-left: 1em;
  text-indent: -0.9em;
}

.top .link li:last-child {
  margin-bottom: 0;
}


.top .link li li{/*下階層*/
  margin: 0.7em 0 0.7em 0.5em;

	font-size: 80%;
  line-height: 1.2;
}


.top .link li::before {
	content: '\025b6';
	margin-right: 0.4em;
  font-size: 0.8em;
}

.top .link li::before {
	content: '\025b6';
	margin-right: 0.4em;
  font-size: 0.8em;
}

.top .link li li::before {
	margin-right: 0.2em;
  font-size: 0.8em;
  vertical-align: middle;
  margin-bottom: 0em;
  padding-bottom: 0.5em;
}
.top .link li:hover::before, .top .link li li:hover::before{
  color:#ebb8b1;
}


.top .link .pagejump {
  margin: .8em 0 0 0;
  padding: 0 0 0 1em;
  display: inherit;
  font-weight: normal;
  text-align: left;
}

.top .link .pagejump li {
  display: inherit;
  margin: 0 0 .5em 0;
}

.top .link .pagejump li:last-child {
  margin-bottom: 0;
}

.top .reference_list {
  margin: 2em 0;
}

.top .reference_list li {/*トップ注釈*/
 /* color: /*#fff;
  font-size: .12rem;*/
}

@media (max-width: 750px) {
  .top .reference_list li  {
    font-size: .2rem;
  }
}

.top .reference_list img {
  height: 0.7em;
  margin-bottom: 0.3em;
}
.top .reference_list img.hlp {
  height: 1.1em;
}





/*# sourceMappingURL=style.css.map */




/* ================================================
ユーザーサポート
================================================ */
.column {
	padding: 0.9em;
	 margin: 1em 0em 1em 0em;
	background: rgba(255,255,255, 0.5);
	border: double 1px #211d12;
}


@media (max-width: 750px) {
	.column {
	}
}
.column div.column_ttl {
	background: linear-gradient(to right, transparent 0%, rgba(121,91,29, 0.7) 30%, rgba(121,91,29, 0.7) 70%, transparent 100%);
	padding: 0.5em 0em;
	  display: flex;
  justify-content: center;
  align-items: center;
}




/*----------------------------------
h1 h2 h3
----------------------------------*/





h1	{
  text-align: center;
    font-weight: 600;
    color: #00a0c8;
    font-size: 2.7em ;
    padding-bottom: 1em;
    
}

@media (max-width: 750px) {

h1	{
    font-size: 2em ;
    
}
}

h1 span{
  position: relative;
  padding: 0 .3em;
  display: inline-block;
    
  }
h1 span::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -.1em;
    width: 100%;
    height: .4em;
    background-color: #ffe982;
    z-index: -1;
    border-radius: .2em;
	}

h2	{
	position: relative;
	font-size: 150%/*25px*/;
	color: #fff;
	line-height: 1.2em;
  text-align: center;
    background: url(../img/common/title_bg.png) top center #00a0c8;
    font-weight: 600;
    border-radius: .5em;
    color: #fff;
    margin: 2em 0 1em;
    padding: 0.5em 0;
}

h2:before {  
	content: '';
  	position: absolute;
  	top: 50%;
  	left: 0.2em;
	z-index: -1;
	background-position: center top;
	background-size: 100% auto ;
	background-repeat: no-repeat;
  width: 1.2em;
  height: 1.2em;
  margin-top: -0.6em;
  
}
h2::after {  
	content: '';
  	position: absolute;
  	top: 50%;
  	right: 0.2em;
	z-index: -1;
	background-position: center top;
	background-size: 100% auto ;
	background-repeat: no-repeat;
  width: 1.2em;
  height: 1.2em;
  margin-top: -0.6em;
}


.before { /*スマホヘッダー固定用の空白 shiyo*/
	height:60px;
}
@media (max-width: 750px) {
  .before{
    height: 5vw;
  }
}



h3 {position: relative;
  font-size: 120% /*22px*/;
  font-weight: bold;
  line-height: 1.2;
    position: relative;
    text-align: center;
    font-weight: 600;
    color: #00a0c8;
    border-top: 2px solid #00a0c8;
    border-bottom: 2px solid #00a0c8;
    margin-bottom: .5em;
    margin-top: 2em;
    padding: 0.5em 0;
    background: #f1fafb;
}
h3 img {
	height:120%;
	padding:0px;
	margin:0px 5px ;
	vertical-align: middle;
  max-height: 2em;
  width: auto;
}
h3 > span {
	font-weight: bold;
	}
h3 > span > span {
	font-weight: bold;
	}

h3 ~ p {   }




h4 {
	font-size:110%;
	clear: both ;
	color:#00a0c8;
	font-weight: bold;
	line-height: 1.2em;
	padding: 3px 0px 5px 10px;
	margin-top:2em;
	margin-bottom:0.5em;
  position: relative;
  padding-bottom: 5px;
  border-left: 0.4em solid #00a0c8;
  display: flex;
  align-items: center;
}

h4 img {
	height:110%;
	vertical-align:middle;
	padding:0px 0px 0px 0px;
}

main h4 img.icon    { margin: 0 .5em 0 0; }

h4 a {
	text-decoration: none;
	color:#72640c;
}

h4.us::after{border-bottom: none;}

h5 {
	font-size:0.2rem;
	clear: both ;
	color:#9f1114;
	font-weight: bold;
	line-height: 1.2em;
	padding: 3px 0px 0.1rem 0px;
	margin-top:3%;
	margin-bottom:0.5em;
	border-bottom: 2px solid rgba(85,71,56,0.5);
}

@media (max-width:750px){
  h5{
    font-size: inherit;
  }
}

h5 img {
	height:1.5em;/*25px;*/
	width: 2em;
	vertical-align:middle;
	padding:0px 10px 0px 0px;

}

section {
	overflow: hidden;
	margin-bottom:0.5em;
	clear: both ;
}
section:first-child {
	margin-bottom:0;
}


.indent_left        { margin-left: 1.5em; }


a:hover {
	color:#e75d58;
	opacity:0.65;
}
p {
	margin:0 0 1em 0;
}
img {
	vertical-align:middle;
}
img.frame {/*shiyo*/
	border:1px solid #b8860b;
	background-color: rgba(0,0,0,0.5);
}

ul,ol,dl {
	margin:0;
}
ul li {
		list-style-type: none;
/*	list-style:disc;*/
}

main li {
  line-height: 1.25;
}

ul.maru li {
	list-style:disc;
	text-indent: -2em;
	padding-left: 1.5em;
    margin-left: 8%;
}
/*
@media (max-width: 750px) {
	ul.maru li {
  padding-left: 0;
  margin-left: 8%;
	}
}
*/
ul.maru span {
    font-weight: bold;
	color: #1A0058;
}

ul.nodisc li {
	list-style:none;
/*	text-indent: -0em;
	padding-left: 1em;*/
}
ul.maru_kei li {
	list-style:disc;
	text-indent: -0em;
	padding-left: 1em;
}
div.list_kei {
	border: 2px #be0006 solid;
	margin: 0.5em 0 1em;
}
div.list_back {/*R3で使用*/
  width: 98%;
	margin: 1em 1%;
  padding: 1% 2%;
	background: #ffffffcc;
  border: solid 1px #17acdc;
  border-radius: 15px;
}
@media (max-width: 750px) {
	div.list_back {
  width: 96%;
  margin: 1em 2%;
  padding: 5%;
	}
}

p.list_back_ttl {
	margin: 1% 2% 2% 2%;
	padding-bottom: 0.5em;
  font-weight: bold;
	color: #00a0c8;
	border-bottom: 3px dotted #17acdc;
}

/*================================================
 *  表
 ================================================*/

table {
  width: 98%;
  margin: 3% 1%;
  border-style: hidden;
  border-collapse: collapse;
  border-spacing: 0;
  border-radius: 15px;
  line-height: 1.6;
  font-size: 90%;
  overflow: hidden;
  box-shadow: 0 0 0 1px #17acdc;
}

@media (max-width: 750px) {
  table {
    width: 96%;
    margin: 3% 2%;
  }
  }

/* table:last-child {
  margin-bottom: 0;
} */





table:last-child {
  margin-bottom: 0.5em;
}

table th, table td {
  padding: .5em;
  border: dotted 1px #01a0c8;
}

/*table td {
  border: dotted 1px #333;
  background: #9d9d9d;
}*/

    


table td.info {
  background: #b9a281;
  color:#111;
  text-align: center;
}

table th {
  border: dotted 1px #01a0c8;
background: #FDF8F4;
}

table th br.force { display: block; }


table th > span {/*thの改行*/
	display: inline-block;
    font-size: 75%;
    font-style: normal;
    background-color: gold;
    padding: 0 0.5em;
    margin-top: 0.2em;
}


table th > span.inline {
    background-color: inherit;
}


table img {
  margin: 0 .5em;
  width: auto;
  height: 1.2em;
}


table.table_btn {
  table-layout: fixed;
}

table.table_btn th, table.table_btn td {
  width: auto;
	text-align: center;
}


table.table_btn th.th_02 {/*操作ボタン*/
  background: #01a0c8;
  color: #fff;
  font-weight: bold;
  text-align: center;
}

table.table_btn td.vup {/*R3で使用*/
  background: #cff3ff;
}


table.w_ttl {/*冒頭に見出し行　R3で使用*/
}

table.w_ttl th.midashigyo {
  width: auto;
  background-color: rgba(0,0,0,0.3)	;
	color: #000;
}

table.w_ttl th {
 width: 35%;
}


th {
	text-align:left;
	font-weight:bold;
}



td {
	text-align:left;
	color:#000;
	padding:2px 10px;
	background: rgba(255,255,255,0.3);
}

table.kishu td > span {
    display: inline-block;
    font-size: 80%;
    background-color: rgba(200,209,44,0.3);
    padding: 4px;
    margin-top: 4px;
}


th img {
	height:30px;
	vertical-align:middle;
	margin:5px;
}

td img {
	height:25px;
	vertical-align:middle;
	margin:5px;
}
th,td {
  	border: solid 1px #7b672e;
	vertical-align: middle;
}


table.sousa th {
    width: 40%
}


table.th20{/*R3で使用*/
    margin-top:3%;}
table.th20 th{
	width: 22%;
}
table.th20 th span, table.table_btn th span{
    background-color: inherit;
    font-size: inherit;
}


/*================================================
 *  1400　機種わけ
 ================================================*/
/*
td > span.kishu {
    display: block;
    font-size: 80%;
    background-color: rgba(200,209,44,0.3);
    padding: 4px;
    margin-top: 4px;
}
*/

span.ps5,span.ps4,span.sw2,span.sw1,span.steam,span.all {
    font-size:70% ;
}
span.ps5,span.ps4,span.sw2,span.sw1,span.steam,span.all::before {
  color: white;
}


span.ps5::before,
span.ps4::before {
display: inline-block;
background-color: blue;
padding: 1px 10px;
margin: 0 2px;
border-radius: 4px;
}
span.ps5::before {content: 'PS5';}
span.ps4::before {content: 'PS4';}


span.sw2,span.sw1::before {
   display: inline-block;   /* ← 擬似要素やインライン要素でも角丸を効かせるため */
  background-color: red;
  padding: 1px 4px;
  margin: 0 2px;
  border-radius: 4px;      /* ← 角丸の半径を指定 */
}
span.sw2::before {content: 'Switch2';}
span.sw1::before {content: 'Switch';}

span.steam::before {
    display: inline-block;
    background-color:  green;
    padding: 1px 6px;
  margin: 0 2px;
    border-radius: 4px; 
}
span.steam::before {content: 'Steam';}


span.all {
    display: block;
}
span.all::before {
    display: inline-block;
    background-color:  black;
    padding: 1px 6px;
  margin: 0 2px;
    border-radius: 4px; 
}
span.all::before {content: 'All';}

p span.all {
    display: inline-block;
}

/*================================================
 *  表（テキストセンター）
 ================================================*/
.center th {
  	text-align: center;
}
.center td {
  	text-align: center;
}

/*================================================
 *  クラス
 ================================================*/

.sec_inner {
  width: 96%;
  margin: 0 auto 0;
}


.float_clear{
	clear: both ;
}
.line {
	display: inline-block;
}
.text_main{/*shiyo*/
	margin-top: 0.5em;
  	margin-bottom:0.5em;
	padding:0;
	text-align: justify;
}
.text_main img {/*shiyo*/
	height:22px;
	margin:5px;
}

.rotated_90 {
transform: rotate(90deg)
}


/*================================================
 *  注釈
 ================================================*/

p.hint0,p.hint1 {/*注釈1*/
	font-size: 0.9em;
	color:#898989;
}
.hint0::before {
	content: '';
}

div.flexbox_ph p.hint0 {/*flex内*/
	font: 1em;
/*	color: hsl(8, 58%, 42%);*/
  display: inline-block;
  margin-left: 1em;
    text-indent: -1em;
    line-height: 1.3;
}



.hint1::before {/*\203b*/
	content: 'Caution';

	padding: 0.2em;
	margin-right: 0.25em;
}




/*================================================
 *  san8re 3200 zu
 ================================================*/

 .inner_blk                { padding: 0.25em; margin: 0.75em auto; background: hsla(0, 0%, 98%, 0.7); border-radius: 0.25em;  }



/*================================================
 *  photo*/
/*
================================================*/


div.photo {/*画像センタ*/
     width:80%;
     min-width: 320px;
     margin:0.4rem 10% 10%;
background-color: #acd5e3/*rgb(53 53 53 / 50%)*/;
	padding:1.5%;/*背景とアキで外ケイ2*/
}
@media (max-width: 750px) {
div.photo {/*画像センタ*/
	width: 100%;
     margin:0;
	}
}

div.no_bgcolor {/*画像センタ*/
     width:80%;
     min-width: 320px;
     margin:0.4rem 10% 10%;
background-color: inherit;
	padding:1.5%;/*背景とアキで外ケイ2*/
}


.photo_main_1 {
	padding: 1%;
	text-align: center;
	background-color:#acd5e3;
}

.with_cap {
    margin-bottom: inherit;
    margin-bottom: 0;
}

/*================================================
 *  番号付き見出し インデントなし
 ================================================*/

.number_akinashi {
	margin-left: 0%;
	margin-right: 0%;
}

.number_akinashi h3 {
  display: flex;
  align-items: center;
  color: #fff;
	font-size: 1.2em !important;
	font-weight: bold;
	clear: both ;
	line-height: 1.25;
	padding-left:0.75em;
	text-indent:0.25em;
	margin-bottom: 0.5em ;
	text-align: left;
  background-color: #17acdc;
  border: double 3px #fff;
	box-shadow: none;
}
.number_img{ 
	height: 1.5em;
	width: auto;
	margin: 0em 0.25em 0em 0em;
	vertical-align: middle;
}
.number_img2{ 
	height: 1.5em;
	width: auto;
	margin: 0em 0.25em 0.2em 0em;
	vertical-align: middle;
}

@media (max-width: 750px) {
.capcenter_no img {
	display: inline-block;
	width: auto;
margin-top: 0.1em;
margin-right: 0.1em;
}
}

@media (min-width: 751px) {
.capcenter_no img {
	display: inline-block;
	width: auto;
margin-right: 0.1em;
}
}



@media (max-width: 750px) {
.number_akinashi.capcenter_no br{
	display: inline;
}
}


/*================================================
 *  画像（横並び)
================================================*/




/* 1100 */

.p1100          {  }

.p1100 .kakomi          { margin-bottom: 1.5em; }
.p1100 .kakomi h4       { border-left: 0; border-bottom: 2px solid; border-color: var(--acce-d-color); color:#3b0101;}

.p1100 a        { text-decoration: underline; text-underline-offset:0.2em;  }

main .p1100 .disc li  { margin-bottom: 0.75em;}

/*R1*/
div.center{
	text-align: center;
	margin: 0 auto;
}

.block_50 { /*2300用*/
  	display: inline-block;
	width: 49%;
	vertical-align: text-top;
	margin: 0 auto;
}

.block_30 { /*1*/
	display: inline-block;
	width: 30%;
	vertical-align: text-top;
	margin: 0% auto;
}

.block_25 { 
	display: inline-block;
	width: 21%;
	vertical-align: text-top;
	margin: 1% 1%;
}

.capphoto{
  font-size: 90%;
  color:#00a0c8;
}

/*================================================
 *  番号付き見出し インデントあり
 ================================================*/

.number{
	margin-left: 3%;
	margin-right: 3%;
	text-align: justify;
}

.number h3 {
	font-weight: bold;
	clear: both ;
	background-color: inherit;
	border:none;
	box-shadow: none;
	color:#e75d58;
	font-size: 1.2em !important;
	line-height: 0.5;
    padding-left:0em;
	margin-bottom: 0.05rem ;
	padding-bottom: 0;
	text-align: left;
  display: flex;
  align-items: center;
}
.number_img{ /*数字画像 sample使用*/
	height: 1.5em;
	width: auto;
	margin: 0em 0.25em 0em 0em;
	vertical-align: middle;
}

/*================================================
 *  番号付き見出し インデントなし
 ================================================*/


.cont_wrap      { margin-left: 1em; }

.number_akinashi {
	margin-left: 0%;
	margin-right: 0%;
}

.number_akinashi h3 {
	font-weight: bold;
	clear: both ;
	background-color: inherit;
	border:none;
	box-shadow: none;
	color:#e75d59;
	font-size: 1.2em !important;
	line-height: 1.2;
	padding-left:0;
	text-indent:0;
	margin-bottom: 0 ;
	padding-bottom: 0;
	text-align: left;
}
.number_img{
	height: 1.5em;
	width: auto;
	margin: 0em 0.25em 0em 0em;
	vertical-align: middle;
}

@media (max-width: 750px) {
.capcenter_no img {
	display: inline-block;
	width: auto;
margin-top: 0.1em;
margin-right: 0.1em;
}
}

@media (min-width: 751px) {
.capcenter_no img {
	display: inline-block;
	width: auto;
margin-right: 0.1em;
}
}



/*4100*/
.photo p.capcenter_no{
	margin-top: 0.5em;
}
.indent_left{
	margin-left: 2.2em;
}

@media (max-width: 750px) {
  .indent_left{
    margin-left: 1em;
  }
}


/*================================================
 *  囲み1
 ================================================*/

.kakomi {
	margin: .5em auto;
	border: solid 1px #e75d58;
	clear: both;
	background: rgba(255,255,255,.8);
  padding: 0.75em;
     margin-bottom: 0;

}


.kakomi2 p {
	padding: 0.5em;
	margin: 0.25em 0;
    margin-bottom: inherit;
}

.kakomi2 {
	margin: 1em 0;
	border: solid 1px #e75d58;
	clear: both;
	background:#fcf8eb;
  padding: 0em;
    position: relative;

}

.kakomi2 h4 {
    top: 0;
	margin: 0;
	padding: 0.5em 0 0.5em 1em;
  margin-bottom: 0em;
    background-color: #e75d58;
    color: beige;
    display: block;
    border: none;
   }

.kakomi2 ul {
 padding:1em;
}


ul.aki {
}


ul.aki li {
    padding: 0.25em 0.5em 0.25em 0.25em;
   }
ul.aki li span {
    color: #e75d58;
}
    
ul.kakomi {
 padding: 0em;
}


ul.kakomi li {
  text-align: left; 
      margin: 0;
    padding: 0;
	color:#360a03;
   }


/*================================================
 *  span (h3内)
 ================================================*/
h3 span {
	margin: 0 0.3em;
	font-size: 70%;
	padding: 0.1em 0.3em ;
	vertical-align: 0.15em;
	background: rgb(0,0,0);
}

span.ps5,span.ps4,span.sw2,span.sw1,span.steam {
    font-size:70% ;
}
span.ps5,span.ps4,span.sw2,span.sw1,span.steam::before {
  color: white;
}


span.ps5::before,
span.ps4::before {
display: inline-block;
background-color: blue;
padding: 1px 10px;
margin: 0 2px;
border-radius: 4px;
}
span.ps5::before {content: 'PS5';}
span.ps4::before {content: 'PS4';}


span.sw2,span.sw1::before {
   display: inline-block;   /* ← 擬似要素やインライン要素でも角丸を効かせるため */
  background-color: red;

  padding: 1px 4px;
  margin: 0 2px;

  border-radius: 4px;      /* ← 角丸の半径を指定 */
}
span.sw2::before {content: 'Switch2';}
span.sw1::before {content: 'Switch';}

span.steam::before {
    display: inline-block;
    background-color:  green;
    padding: 1px 6px;
  margin: 0 2px;
    border-radius: 4px; 
}
span.steam::before {content: 'Steam';}


/*furious*/
.flex_ph_left {
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;

}
img.mini {
    width: 30%;
    margin: 0 4% 0 0;
}


.cap {
    font-size: 90%;
        text-align: center;
}




ul.kakomi li {
    list-style-type: circle;
}




/*================================================
 *  写真につける矢印（スマホは縦）
 ================================================*/

/*スマホ変形あり =flexbox_ph_arrow*/
/*スマホ変形なし =flexbox_ph_arrow_yoko*/

/*親*/
.flexbox_ph_arrow,.flexbox_ph_arrow_yoko {
  margin: 1em auto !important;
}
/*変形あり　スマホでは縦*/
  .flexbox_ph_arrow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	flex-direction: column;
	  position: relative;
  }
  .flexbox_ph_arrow div {/*矢印*/
  }
  .flexbox_ph_arrow img.ph_w_arrow {
	  width: 80%;
	  height: 80%;
  }

/*変形あり　751以上は横*/
@media (min-width: 751px) {
  .flexbox_ph_arrow,.flexbox_ph_arrow_yoko {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	  flex-direction: row;
	  position: relative;
    width: 98%;
    margin-left: 1%;
    margin-right: 1%;
  }
  .flexbox_ph_arrow img.ph_w_arrow {
	  width: auto;
  }
  .flexbox_ph_arrow div {
	  width: 10%;
	 top: 0;
	 bottom: 0;
	 margin: auto;
  }
 .flexbox_ph_arrow img.arrow_roteted {
	transform: rotate(-90deg);
  }
  }

  @media (max-width: 751px) {
    .flexbox_ph_arrow div {
        width: 30%;
       top: 0;
       bottom: 0;
       margin: auto;
      }
    }

/*変形なし　常時横*/
.flexbox_ph_arrow_yoko {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
	flex-direction: row;
	  position: relative;
  }
.flexbox_ph_arrow_yoko img.ph_w_arrow {
	  width: 40%;
    height: auto;
    padding: 1%;
    margin: 0;
    background-color: #acd5e3;
  }
  @media (max-width: 750px) {
    .flexbox_ph_arrow_yoko img.ph_w_arrow {
      width: 43%;
    }
  }
  


  .flexbox_ph_arrow_yoko div {
	  width: 10%;
    height: auto;
	 top: 0;
	 bottom: 0;
	 margin: auto;
  }
 .flexbox_ph_arrow_yoko img.arrow_roteted {
	transform: rotate(-90deg);
  }


/*================================================
 *  画像（横並び)
 ================================================*/


.block_30 {/*2*/
  color: #1A0058;
	display: inline-block;
	width: 31%;
	vertical-align: text-top;
	margin: 3% 1% 0 1%;
}

.mar0 {
    margin: 0;
}

.block_50 {
  color: #1A0058;
	display: inline-block;
	width: 47.7%;
	vertical-align: text-top;
	margin: 3% 1% 0 1%;
}

.block_20 {
	display: inline-block;
	width: 50%;
	vertical-align: text-top;
	margin: 0% 1%;
}
.block_70 {
	display: inline-block;
	width: 65%;
	vertical-align: text-top;
	margin: 0% 1%;
}
.block_81 {
	display: inline-block;
	width: 75%;
	vertical-align: text-top;
	margin: 0% 1%;
}
.block_19 {
	display: inline-block;
	width: 18%;
	vertical-align: text-top;
	margin: 0% 1%;
}
.block_51 {
	display: inline-block;
	width: 47%;
	vertical-align: text-top;
	margin: 3% 1% 0 1%;
}



@media (max-width: 750px) {
  .block_30 {/**/
    width: 30%;
  }
  .block_50 {
    width: 47%;
  }
}

.block_30 table th {
    width: 30%;
}


/*よこに3つ並べるとき
親<div class="center flex">
子<div class="block_30">で
*/


div.center{
	text-align: center;
	margin: 0 auto;
	clear: both;
}
div.flex {
    display: flex;
}


.kakomi-wrap{
  display: flex;
  background: #5ac8dc;
  border-radius: 20px;
  padding: 2%;
  margin-top: 5%;
  flex-wrap: wrap;
}

.kakomi-wrap .kakomi-50{
  background: #fff;
  border-radius: 20px;
  width: 48%;
  margin: 1%;
  padding: 3%;

}

.kakomi-wrap .kakomi-50 h4{
  margin-top: 0;

}


.kakomi-wrap .kakomi-50 .photo{
  min-width: 100%;
  padding: 0;
  margin: 5% 0;
}


@media (max-width: 750px) {

.kakomi-wrap .kakomi-50{
  width: 100%;
  margin: 2%;
  padding: 5%;
}
}