/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: flex !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: flex !important; }
}

body{
font-family: "Noto SansJP",sans-serif;
}

.suma-pingpong-top{
width:100%;
max-width:100vw;
height:640px;
margin-bottom:100px;
background-image:url(https://suma-pingpong.com/wp/wp-content/uploads/2024/07/suma-pingpong_2024-summer_top2a.png);
background-size:cover;
}

.suma-pingpong-top ul{
display:flex;
justify-content:center;
align-items:flex-end;
width:1200px;
height:640px;
max-width:100%;
margin:auto auto;
list-style:none;
padding-left:0;
}

.suma-pingpong-top ul li{
width:100%;
padding:25px 200px;
font-size:30px;
font-weight:600;
text-align:center;
color:#fff;
background-color:#f2e66b;
margin-bottom:-65px;
filter:drop-shadow(1px 1px 5px #999);
}

.suma-pingpong-top ul a{

}


.parent {
    text-align: center;         /* 子要素を左右中央揃えにする */
    border: solid 0px;          /* 枠線指定 */
    padding:  20px;             /* 余白指定 */
	width: 100%;
}

.inline-block_test {
    display: inline-block;      /* インラインブロック要素にする */
    padding:  0px;             /* 余白指定 */
    height: 130px;              /* 高さ指定 */
}

.flex-container {
  display: flex;
  justify-content: center;
}

.object-fit-img {
	width: 100%;
	height: 100%;
  object-fit: cover;
  font-family: 'object-fit: cover;'
}

.img {
  object-fit: cover;
}

#container {
display: grid;
grid-template-rows: 33% 3px 33% 3px 33%;
grid-template-columns: 33% 0.5% 33% 0.5% 33%;
}

#container2 {
display: grid;
grid-template-columns: 33% 0.5% 33% 0.5% 33%;
}

#item1 {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
}

#item1x2 {
    grid-row: 1 / 4;
    grid-column: 1 / 4;
}

#item2 {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
}

#item3 {
    grid-row: 1 / 2;
    grid-column: 5 / 6;
}

#item4 {
    grid-row: 3 / 4;
    grid-column: 1 / 2;
}

#item5 {
    grid-row: 3 / 4;
    grid-column: 3 / 4;
}

#item6 {
    grid-row: 3 / 4;
    grid-column: 5 / 6;
}

#item7 {
    grid-row: 5 / 6;
    grid-column: 1 / 2;
}

#item8 {
    grid-row: 5 / 6;
    grid-column: 3 / 4;
}

#item9 {
    grid-row: 5 / 6;
    grid-column: 5 / 6;
}

#container3 {
display: grid;
grid-template-columns: 16.66% 16.66% 16.66% 16.66% 16.66% 16.66%;
}

#itemA {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
}

#itemB {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
}

#itemC {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
}

#itemD {
    grid-row: 1 / 2;
    grid-column: 4 / 5;
}

#itemE {
    grid-row: 1 / 2;
    grid-column: 5 / 6;
}

#itemF {
    grid-row: 1 / 2;
    grid-column: 6 / 7;
}

#container7 {
display: flex;
		  justify-content: center;
	
}

#box3 {
	min-width: 45%;
		padding: 20px;
margin: 10px;
}

#box4 {
	display: flex;
	align-items: center;
	justify-content: left;
	background-color: #666;
	height: 30px;
	padding: 10px;
	margin-bottom: 10px;
	font-size: 15px;
	color: white;
			border-top-right-radius: 30px;
}

#container8 {
display: flex;
		  justify-content: center;
	align-items: center;
background-color: #666;
	height: 400px;
	background:linear-gradient(to top left, #333, #666)
}

#container8 span {
	color: #fff;
}

#box5 {
	width: 350px;
		height: 370px;
		padding: 20px;
margin: 10px;
}

#box6 {
	display: flex;
	align-items: center;
	justify-content: left;
	background-color: #fff;
	height: 30px;
	padding: 10px;
	margin-bottom: 10px;
	font-size: 15px;
		border-top-right-radius: 30px;
}

.boxA {
	display: flex;
	flex-direction: column;
	margin: 20px;
}

#box8 {
		display: grid;
    grid-template-rows: 100px 10px 100px 10px 100px 10px 100px;
	  grid-template-columns: 50% 50%;
	  min-width: 300px;
	margin: 20px;
}

#box8-1a {
		display: flex;
	  align-items: center;
	  justify-content: center;
		background-color: #eee;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
}

#box8-1b {
		display: flex;
	  align-items: center;
	  justify-content: center;
		background-color: #fff;
    grid-row: 1 / 2;
    grid-column: 2 / 3;
		    font-size: 20px;
		border: 5px #eee solid;
}

#box8-2a {
		display: flex;
	  align-items: center;
	  justify-content: center;
		background-color: #eee;
    grid-row: 3 / 4;
    grid-column: 1 / 2;
}

#box8-2b {
		display: flex;
	  align-items: center;
	  justify-content: center;
		background-color: #fff;
    grid-row: 3 / 4;
    grid-column: 2 / 3;
		    font-size: 20px;
		border: 5px #eee solid;
}

#box8-3a {
		display: flex;
	  align-items: center;
	  justify-content: center;
		background-color: #eee;
    grid-row: 5 / 6;
    grid-column: 1 / 2;
}

#box8-3b {
		display: flex;
	  align-items: center;
	  justify-content: center;
		background-color: #fff;
    grid-row: 5 / 6;
    grid-column: 2 / 3;
		    font-size: 20px;
		border: 5px #eee solid;
}

#box8-4a {
		display: flex;
	  align-items: center;
	  justify-content: center;
		background-color: #eee;
    grid-row: 7 / 8;
    grid-column: 1 / 2;
}

#box8-4b {
		display: flex;
	  align-items: center;
	  justify-content: center;
		background-color: #fff;
    grid-row: 7 / 8;
    grid-column: 2 / 3;
		    font-size: 20px;
		border: 5px #eee solid;
}

#container5 {
display: flex;
		  justify-content: center;
}

#container5a {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

#boxB {
		display: grid;
    grid-template-rows: 60px;
	  min-width: 180px;
	background-color: #fff;
margin: 5px;
		border: 5px #fff solid;
	border-radius: 10px;
}

#boxBa {
		display: flex;
	  align-items: center;
	  justify-content: center;
	  background-color: #fff;
    grid-row: 1 / 2;
  	font-size: 20px;
			min-width: 150px;
		border: 1px #fff solid;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
} 

#boxA {
		display: grid;
    grid-template-rows: 100px 40px 40px;
	  min-width: 180px;
	background-color: #eee;
margin: 5px;
		border: 5px #eee solid;
	border-radius: 10px;
}

#boxA2 {
		display: flex;
	  align-items: center;
	  justify-content: center;
	  background-color: #fff;
    grid-row: 2 / 5;
    grid-column: 1 / 2;
  	font-size: 20px;
			min-width: 150px;
		border: 5px #eee solid;
	border-radius: 10px;
}

#boxA-a {
		display: flex;
	  align-items: center;
	  justify-content: center;
	  background-color: #fff;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  	font-size: 20px;
			min-width: 150px;
} 

#boxAa {
		display: flex;
	  align-items: center;
	  justify-content: center;
	  background-color: #fff;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  	font-size: 20px;
			min-width: 150px;
		border: 1px #eee solid;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
} 

#boxAb {
		display: flex;
	  align-items: center;
	  justify-content: center;
    background-color: #fff;
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    font-size: 20px;
		min-width: 150px;
		border: 1px #eee solid;
} 

#boxAc {
		display: flex;
	  align-items: center;
	  justify-content: center;
	  background-color: #eee;
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    font-size: 20px;
	  min-width: 150px;
} 

#box1 {
		display: grid;
    grid-template-rows: 60px 60px 60px;
	  min-width: 300px;
	background-color: #eee;
margin: 20px;
		border: 5px #eee solid;
	border-radius: 10px;
}

#box2 {
		display: grid;
    grid-template-rows: 60px 60px 60px;
	  min-width: 300px;
	background-color: #eee;
	margin: 20px;
		border: 5px #eee solid;
	border-radius: 10px;
}

#box3 {
		display: grid;
    grid-template-rows: 100px 100px 100px;
	  min-width: 300px;
	background-color: #eee;
	margin: 20px;
}

#box3a {
		display: grid;
    grid-template-rows: 100px 100px 100px;
	  min-width: 40%;
	background-color: #eee;
	margin: 20px;
}

#box3b {
		display: flex;
	  align-items: center;
	  justify-content: center;
	  background-color: #eee;
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    font-size: 15px;
	  min-width: 200px;
} 

#box3c {
		display: grid;
    grid-template-rows: 100px 100px 100px;
	  min-width: 300px;
	background-color: #fff0f5;
	margin: 20px;
}

#box1a {
		display: flex;
	  align-items: center;
	  justify-content: center;
	  background-color: #fff;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  	font-size: 30px;
	border: 1px #eee solid;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
} 

#box1b {
		display: flex;
	  align-items: center;
	  justify-content: center;
    background-color: #fff;
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    font-size: 30px;
		min-width: 200px;
		border: 1px #eee solid;
} 

#box1c {
		display: flex;
	  align-items: center;
	  justify-content: center;
	  background-color: #eee;
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    font-size: 15px;
	  min-width: 200px;
} 

#box1c-1 {
		display: flex;
	  align-items: center;
	  justify-content: center;
	  background-color: #eee;
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    font-size: 20px;
	  min-width: 200px;
} 

#box1d {
		display: flex;
	  align-items: center;
	  justify-content: center;
	  background-color: #eee;
    grid-row: 1 / 4;
    grid-column: 1 / 2;
    font-size: 15px;
	  min-width: 200px;
} 

.balloon1 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 20px;
  background: #e0edff;
		border-radius: 10px;
}

.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
}

.balloon1 p {
  margin: 0;
  padding: 0;
}

#sumakitacontainer1 {
display: grid;
grid-template-columns: 48% 4% 48%;
}

#sumakitaA {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
}

#sumakitaB {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
}