@charset "utf-8";

/* タブレット (959px以下)-----------w700 */
@media only screen and (max-width:1023px){
	
	/*タブレット以下では表示しない*/
	.pc{
		display: none;
	}
	.headlink{
		display: none;
	}
	
	/*タブレットのみ表示する*/
	.tab{
		display: block;
	}
	
	th img,
	td img{
		width: 100%;
		height: auto;
	}
	iframe{
		width: 460px !important;
	}
	.toppage iframe{
		width: 380px !important;
	}
	
	.description_txt p{
		width: 700px;
		padding: 5px 0;
		margin: 0 auto;
	}

	#header_in,
	#wrap,
    .banner_1,
    .fmenu ul,
    .footer_in{
		max-width: 700px;
	}
    
    #header #siteid{
        margin: 0 0;
    }

	.gmenu{
        width: 696px;
		margin-bottom: 10px;
	}
	.gmenu ul{
		width: 700px;
		}
	.gmenu ul li a span{
		width: 138px;
		}
    .gmenu ul li a .m_4{
        width: 136px;
    }
    .menu_2 p a, .menu_2 ul li a{
        width: 176px;
    }
    
	
	
	.subpage #wrap{
		width: 96%;
	}
	
	#unit_a{
		width: 460px;
		padding: 0;
		float: left;
	}
	#unit_a table{
		width: 460px;
	}
	
	#unit_a img{
		max-width: 460px !important;
		height: auto !important;
	}
	
	
	
	#unit_b{
        width: 220px;
		float: right;
	}
	
	.subpage .rowunit_3 img{
		max-width: 100% !important;
		height: auto !important;
	}
	
    .banner_1 p,
    .banner_2 p
    {
       margin-right: 20px;
    } 
    .contents_1 img,
    .contents_3 img,
    .contents_4 img,
    .banner_2 img,
    .banner_1 img,
    .banner_2 img{
        max-width: 100% !important;
        height: auto !important;
    }
	
	/*	コンテンツ*/
    .banner_1 p,
    .banner_2 p{
        width: 220px !important;
        height: auto !important;
    }
	
	/*大使*/
	.ms_list ul li{
		width: 31%;
	}
	.subpage .rowunit_3 .ms_list ul li a img{
		width: 100% !important;
		height: 270px !important;
	}
	.ms_list ul::before{
	  content:none;
	}
	.ms_list ul::after{
	  width:31%;
	}
	
    /*トップページ*/
    #slide_1 img{
        max-width: 640px !important;
        height: auto !important;
    }
	#news_topics{
		width: 96%;
		max-width: 700px;
	}
	.tabs{
		font-size: .8rem;
	}
	.colmun_in{
		width: 96%;
		max-width: 700px;
	}
	.toppage .contents_3 {
		width: 96%;
		max-width: 700px;
		margin: 0 auto;
	}
	.box{
		width: 96%;
		max-width: 700px;
		margin: 0 auto;
	}
    .box ul{
	    margin: 0;
	    padding: 0;
	    max-width: 100%;
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: space-between;
    }
    .contents_4 .box ul li{
	    margin: 0 0 20px 0;
	    padding: 0;
	    width: 31.4%;
    }
    .box ul li img{
	    width: 100% !important;
	    height: auto !important;
    }
    
	/*インデックスバナー*/
	.index_bn{
		
	}
	.index_bn ul{
		margin: 0;
		width: 460px;
	}
	
	.index_bn ul li{
		margin: 0;
		padding: 0 0 10px 0;
		display: block;
		float: none;
	}
	.index_bn ul li img{
		max-width: 100% !important;
	}
    
    
    .fmenu ul li a span{
        width: 220px;
       
    }
    .fmenu ul li{
        padding: 0;
        margin: 0;
        margin-right:5px; 
         margin-bottom: 10px;
    }

	/*メールフォーム*/
	.mail_form .form_label{
		width: 137px;
		}
	.mail_form .form_input{
		width: 300px;
		}
	.mail_form .form_input textarea{
		width: 290px;
		}
	.mail_form .form_button input{
		margin: 0 0 10px 150px;
		}
		
}

/* スマホ-----------w300 */
@media only screen and (max-width:700px){

	/*スマホでは表示しない*/
	.rss,
	.pc,
	.tab,
	.pc_tab
	{
		display: none;
	}
	
	/*スマホのみ表示する*/
	.sp{
		display: block;
	}
	
	
	body{

		}
	h1,h2,h3,h4,h5,h6{
	
		}
	.subpage table{
		width: 320px;
	}
	th,td{
		display: block;
/*		width: 310px;*/
	}
	
	iframe,
	.toppage iframe{
		width: 320px !important;
		height: 200px !important;
	}
	
	#bg{
		padding-top: 0;
/* 		margin-bottom: 50px; */
	}
	
    #header_in,
    #wrap,
    .banner_1,
    .fmenu ul,
    .footer_in{
		width: 320px;
		}
    .search .textbox{
        width: 280px;
    }
	#unit_a img{
		display: block;
	}
	
	#unit_a p{
		clear: both;
	}
	#header{
/*
		padding-top: 20px;
	background-position: 0 70px;
*/
        height: 160px;
	}
	#header_in{
	position: static;
		}
	#header #siteid{
			width: 320px;
			}
	#header #siteid h1,
	#header #siteid p a{
/* 			width: 320px; */
			width: 320px;
/* 			height: 75px; */
			height: 68px;
/* 			background-size: 320px auto !important; */
			background-size: 295px auto !important;
			background-position: left -5px top;
			float: none;
			}

	#header #hcontents{
        width: 320px;
		float: none;
        position: static;
        margin: 0 auto;
/*         padding-top: 20px; */
	}

	#wrap{
        
		}
	
/*コンテンツ*/
	#slide_1 img{
		max-width: 300px !important;
		height: auto !important;
    }
    #slide_2 img{
        max-width: 160px !important;
        height: auto !important;
    }
    .rowunit_1, .rowunit_2{
        margin-top: 20px;
        padding: 0 0;
        margin-bottom: 0;
    }
    .rowunit_2{
        background-color: #fff;
    }
    
    .contents_2 p a img,
    .contents_3 p a img{
        max-width: 100% !important;
        height: auto !important;
    }
/*
    .contents_3 p{
        width: 320px;
        margin-right: 0;
    }
    .contents_2 p,
    .contents_3 p
    {
        width: 320px !important;
        height: auto !important;
        text-align: center;
    }
*/
    
    .banner_1{
        width: 320px;
    }
    .banner_1 p{
        margin-right: 9px;
        width: 320px !important;
    }
    .banner_2 p{
	    width: 320px !important;
    }
    .rowunit_2{
        border-top: 0px dashed #665045;
    }
    .rowunit_2 h2{
        border-left: 0px solid #665045;
    }
    .menu_2 p a, .menu_2 ul li a{
        width: 276px;
        text-align: left;
        padding: 10px 30px 10px 10px;
    }
	#topunit_b,
	#unit_a,
	.toppage #unit_a,
	.toppage #unit_a_1,
	.toppage #unit_a_2,
	#unit_b,
	.toppage #unit_b,
	#footer_in{
		float: none;
		width: 320px;
		margin-bottom: 20px;
		}
		
	.fmenu {
        margin-bottom: 20px;
    }
    
	.fmenu ul{
	margin: 0 auto;
	padding: 0;
    width: 320px;
	list-style: none;
    text-align: left;
}
.fmenu ul li{
	display: block;
    margin: 0;
    margin-bottom: 3px;

	padding: 0 0;
     background-color: #fff;
    border-radius: 25px;
    box-shadow: 0px 3px #B3B3B3;
   
}
    .fmenu ul li:hover{
    box-shadow: 0px 1px #B3B3B3;
}
.fmenu ul li a{
    color: #665045;
    text-decoration: none;
    padding: 5px 0 5px 26px;
    display: block;
    width: 290px;
    background-image: url(../all_img/charm/li_03.png);
    background-size: 20px;
    background-position: 95% center;
    background-repeat: no-repeat;
    
}
.fmenu ul li:hover{
    background-color: #FFE200;
}
.fmenu ul li:first-child{
	display: block;
}
    


.menu_4 ul li:first-child{
    display: block; 
}
    
    
    address{
        text-align: center;
    }
	address strong{
		font-size: 100%;
	}
	
	#copy{
		
	}
	
	
	
	/*大使*/
	.ms_list ul li{
		width: 48%;
	}
	.subpage .rowunit_3 .ms_list ul li a img{
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 2 / 2.5;
	}
	.ms_list ul::before{
	  content:none;
	}
	.ms_list ul::after{
	  content:none;
	}
	
	
	/*トップページ*/
	
	.top_main img{
		max-width: 300px;
		height: auto;
	}
	
	.toppage .contents_0{
		margin-bottom: 10px;
	}
	
	.toppage h2{
		font-size: 1.5rem;
	}
	.toppage h2 span{
		display: none;
	}
	
	.topicon li{
		width: 48%;
	}
	
	
	#news_topics .time{
/* 		display: block; */
	}
	
	#news_topics .topictitle,
	.news_topics .topictitle{
		display: block;
		padding-top: 5px;
	}
	
	.toppage .disp_list a{
		font-size: .9rem;
		padding: 2px 25px 2px 10px
	}
	.column{
		padding: 40px 0;
	}
	.bigmoji{
		font-size: 1.3rem;
	}
	.colmun_in ul li{
		width: 48%;
	}
	
	
	
	.contents_4 .box ul li{
		width: 48%;
	}
	
	
	
	
	.mail_form{
		border: 1px solid #cccccc;
		padding: 4px;
	}
	.mail_form .form_label,
	.mail_form .form_input{
		float: none;
		margin: 0;
		padding: 3px;
		width: 284px;
		border: none;
		}
	.mail_form .form_label{
		border-top: 1px solid #ccc;
		background-color: #eee;
	}
	.mail_form .form_input input[type=text]{
		width: 274px;
	}
	.mail_form .form_input textarea{
		width: 274px;
	}
	.mail_form .form_button input{
		margin: 0 0 10px 67px;
	}
	#spmenu{
		width: 320px;
		margin: 0 auto;
	}

	.spm{
		width: 100%;
		background-color: #ffe200;
		position: fixed;
		bottom: 0;
		z-index: 500;
	}
	.spm ul{
		width: 300px;
		margin: 0 auto;
		padding: 0;
		list-style: none;
	}
	.spm ul li{
		display: inline;
		margin: 0;
		padding: 0;
		float: left;
	}
	.spm ul li a{
		display: block;
		width: 100px;
		height: 50px;
		float: left;
		text-indent: -55555em;
		background-repeat: no-repeat;
		background-size: 100px auto;
	}
	.spm ul li.spm_01 a{
		background-image: url("../all_img/charm/spm_01.png");
	}
	.spm ul li.spm_02 a{
		background-image: url("../all_img/charm/spm_02.png");
	}
	.spm ul li.spm_03 a{
		background-image: url("../all_img/charm/spm_03.png");
	}
	
	
	.menu-btn {
    position: fixed;
    top: 0;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 50px;
    width: 50px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    z-index: 150;
    background-color: #f9eeb8;
  }
  .menu-btn span,
  .menu-btn span::before,
  .menu-btn span::after {
    content: "";
    display: block;
    width: 25px;
    height: 3px;
    border-radius: 3px;
    background-color: #665045;
    position: absolute;
    -webkit-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
  }
  .menu-btn span::before {
    bottom: 8px;
  }
  .menu-btn span::after {
    top: 8px;
  }
  #menu-btn-check {
    display: none;
  }
  #menu-btn-check:checked ~ .menu-btn {
    background-color: rgba(255, 255, 255, 0);
  }
  #menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
  }
  #menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
    background-color: #665045;
  }
  #menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
    background-color: #665045;
  }
  #menu-btn-check:checked ~ .menu-content {
    left: 0;
  }
  .menu-content {
	box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;
    z-index: 140;
    background-color: #f9eeb8;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    overflow: scroll;
    padding: 70px 20px;
  }
  .menu-content p {
    margin: 0;
    padding: 0;
  }
  .menu-content ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .menu-content ul li {
    margin: 0;
    padding: 0;
  }
  .menu-content p a,
  .menu-content ul li a {
    display: block;
    color: #665045;
    border-bottom: 1px solid #665045;
    padding: 10px 30px 10px 10px;
    position: relative;
    text-decoration: none;
  }
  .menu-content p a::after,
  .menu-content ul li a::after {
    content: ">";
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
    font-size: .8rem;
    color: #665045;
  }
	
}


/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
	
	
}